Layouts

Oreact Layouts are the wrappers to the pages that helps to manage application elements.

Oreact Layouts can have page elements like NavigationBar, Toolbar and Footer. These elements are configurable.

Oreact allows you to configure and use a different layout per page. This can be set from page routes settings. So this is how each page can have different layout as required. For example, Auth pages like Register and Login doesn't require to showing NavigationBar and Toolbar.

Creating a Layout

Oreact can serve layout components, under a folder called app/layouts in the root directory.

Go this directory and create two files config.js and Layout.js as showing below:

Create layout component

/app/layouts/myLayout/Layout.js

import React from 'react';
import {makeStyles} from '@material-ui/styles';
import {observer} from 'mobx-react';

const useStyles = makeStyles(theme => ({
   /* add layout styles */ 
}));

export default observer((props) => {
    const {
        pageRoutes,
        config: {
            scroll,
            style,
            toolbar,
            navbar,
            footer
        }} = props;   
    const classes = useStyles(props);

    return <div className={clsx(style)}>
        // Display/Hide toolbar component
        {toolbar.display && (             
            <Toolbar/>
        )}

        ...
        {pageRoutes}        
        ...        

        // Display/Hide footer component
        {footer.display && (             
            <Footer/>
        )}
    </div>;
})

Create layout config file

/app/layouts/myLayout/config.js

import Layout from 'app/layouts/myLayout/Layout';

export default {
    title: 'My Layout',
    component: Layout,
    defaults: {
        style: 'fullwidth',
        scroll: 'content',
        navbar: {
            display: true,
            folded: false,
            position: 'left'
        },
        toolbar: {
            display: true,
            style: 'fixed',
            position: 'below'
        },
        footer: {
            display: false,
            style: 'fixed',
            position: 'below'
        }
    }
};

Adding into Layout registry.

app/layouts/index.js

import myLayout from './myLayout/config';

export default {
    myLayout
    ...
};

Use Layout

Layouts are reusable React components. In order to use a layout simply go to the page settings and set layout name.

For Example: In order to use myLayout(as we already created it in above example) with a profile page.

Sample Profile page configuration can look like: /app/pages/profile/config.js

import loadable from '@oreact/core/loadable';

export default {
    settings: {
        layout: {
            type: 'myLayout',
            config: {
                style: 'fullwidth',
                scroll: 'content',
                navbar: {
                    display: true
                },
                toolbar: {
                    display: true
                },
                footer: {
                    display: true
                }
            }
        },        
        ...
    },
    routes: [
        {
            address: ['/profile'],            
            component: loadable(() => import('./Component'), {ssr: true})            
        }
    ]
};

Note: Don't name the layouts directory anything else. The name cannot be changed and is the only directory used to serve layouts.