Layout Customization

Neo Starter Kit offers a flexible layout system that allows you to customize various aspects of the UI, such as headers, toolbars, sidebars, and footers. These configurations are defined in the MasterLayoutConfig.tsx file.

How to Modify the Layout

All layout-related configurations can be found in the MasterLayoutConfig.tsx file. This file contains the default settings for:

• Theme mode (light, dark, or system).
• Header, toolbar, sidebar, content, and footer display options.
• Sticky header and sidebar drawer settings.
• Breadcrumbs and page title display options.

To customize the layout:

1. Open the MasterLayoutConfig.tsx file in your project.
2. Modify the desired configuration values.
3. Save the changes.

Usage example:

import { useSelector } from "react-redux";
import { selectLayout } from "@/store/shared";
 
const MyComponent: FC = () => {
	const layout = useSelector(selectLayout);
 
	return(
		<div>
			{layout.config.{prop} && <span>Displayed based on the config</span>}
		</div>
	);
}

Important Note: Refresh Local Storage

After modifying the layout configuration, ensure that your browser’s local storage is cleared or refreshed. This is necessary because layout settings may be cached in local storage to persist user preferences.

You can manually clear local storage in your browser or include logic in your application to reset stored values during development.

By customizing the MasterLayoutConfig.tsx file, you can create layouts tailored to your project’s requirements. For more information, refer to the comments within the file for detailed descriptions of each configuration option.