Create Custom Layout

Its super easy to create your own custom layout

Jumbo offers pre-built layouts and in most of the cases with few configuration changes these layouts would be enough to implement the desired layout for your app. But sometimes you might feel a requirement to implement a custom layout for few group of the pages or for the complete app.

Following are steps you can take to create your own custom layout. For example, consider that you need a new layout Horizontal Default:

Setting up your layout component

In this step, you need to create your own layout folder "horizontal-default" inside the src/app/layouts/

Inside this newly created src/app/layouts/horizontal-default folder, create two files:

• layoutConfig.js (configuration value in object format for the layout)

• HorizontalLayout.js (Layout Component for new custom layout)

Following is the detailed layoutConfig.js file which explains how you can use the layoutConfig object to configure your layout:

import {
    SIDEBAR_ANCHOR_POSITIONS,
    SIDEBAR_SCROLL_TYPES,
    SIDEBAR_STYLES,
    SIDEBAR_VARIANTS,
    SIDEBAR_VIEWS
} from "@jumbo/utils/constants/layout";

const layoutConfig = {
    sidebar: {
        open: true, //if true then sidebar will be expanded otherwise collapsed
        hide: false,  //if hide is true then sidebar will not render at all
        variant: SIDEBAR_VARIANTS.PERSISTENT, //one of PERSISTENT, TEMPORARY OR PERMANENT
        style: SIDEBAR_STYLES.FULL_HEIGHT, //One of FULL_HEIGHT/CLIPPED_UNDER_HEADER
        view: SIDEBAR_VIEWS.FULL, //One of FULL/MINI
        scrollType: SIDEBAR_SCROLL_TYPES.FIXED, //One of FIXED/DEFAULT
        anchor: SIDEBAR_ANCHOR_POSITIONS.LEFT, //One of LEFT/RIGHT/TOP/BOTTOM
    },
    header: {
        hide: false, //if true then header will not render at all
        fixed: true, //if true then header will remain fixed on scroll
    },
    footer: {
        hide: false, //if true then footer will not render at all
    },
};

Following is a sample HorizontalDefault.js you can consider as a reference to create your own component:

import React, {useEffect} from "react";
import JumboLayout from "@jumbo/components/JumboLayout";
import useJumboLayout from "@jumbo/hooks/useJumboLayout";
import layoutConfig from "./layoutConfig";

const HorizontalDefault = ({children}) => {
    const {setJumboLayoutOptions} = useJumboLayout();

    useEffect(() => {
        setJumboLayoutOptions(layoutConfig);
    }, []);
    
    return (
        <JumboLayout
            header={<YourHeaderComponent />}
            sidebar={<YourSidebarComponent />}
            footer={<YourFooterComponent />}
        >
            {children} //This will render the component you render through routes
        </JumboLayout>
    );
}

As mentioned in HorizontalDefault.js the layoutConfig.js is being used to configure the layout structure while section contents are being passed through the <JumboLayout /> component.