Custom Layout Components

This is the documentation for "SPIN" v2: v2.react.spin.webkom.co

Elements like Sidebars and Navbars can be fully customized within each route. You can provide custom components for them and place them in routes/index.js. You should use the exported functions getSidebars(), getNavbars(), getFooters().

If a custom component for a specific route won't be found, it will use the default Component placed in layout/components.

For example to add a custom navbar - create a new Navbar Component and add it to the getNavbars() array via the <Route> component and specify the route on which the Navbar should be used in the path property.

const getNavbars = () => [
    <Route
        component={ NavbarOnly.Navbar }
        path="/layouts/navbar-only"
    />
    { /* Default Navbar: */}
    <Route
        component={ DefaultNavbar }
    />
];

Accordingly you can change the Sidebar on any page you want using the getSidebars() function. Example:

const getSidebars = () => (
    <Switch>
        <Route
            component={ SidebarASidebar }
            path="/layouts/sidebar-a"
        />
        { /* Default Sidebar: */}
        <Route
            component={ DefaultSidebar }
        />
    </Switch>
);