FUSE
DOCS
Nextjs
Theme Layouts
Fuse comes with a variety of different Theme Layouts which you can see and try them from the configuration sidebar (Click on the animated, spinning cog button from the right side of your screen).
These layouts are accessible from /src/components/theme-layouts directory and you can modify them however you like. Each layout has its own options. Those options allow you to configure the layout elements such as Toolbar, Footer, and Navbar.
File Structure
/src/components/theme-layouts directory- /layout-1 :
- /components : Contains Layout elements such as Toolbar, Footer, and Navbar.
- /Layout1.tsx : Layout 1 component
- /Layout1.config.tsx : Contains title, default configs and form options of the layout.
- /components : Each layouts shares the components of this directory
- /themeLayoutConfigs.tsx : Imports all layout configs.
- /themeLayouts.tsx : Imports all layout components.
- /layout-2
- /layout-3
Configuring
Fuse React has a powerful layout system which allows you to configure and use a different layout per route.
Each route can have its own layout configuration meaning that it's very easy to have pages like login page where there isn't any toolbar or navbar showing, without leaving the Fuse React.
You can get more information about route configuration and its usage from the Routing documentation page.