Layouts

This template has lots of layouts that fulfill your requirements to develop an amazing App.

Jumbo React provides the following layout designs:

1. Vertical (Default) - Fixed Header and Fixed Sidebar

This layout has a vertical and fixed sidebar along with a fixed header. The sidebar will always be fixed and visible in this layout.

To enable this layout go to src / @jumbo / components / contextProvider / AppContextProvider / defaultContext.js file and update layout option value. like:

layout: LAYOUT_TYPES.VERTICAL_DEFAULT,

2. Vertical - Minimal Sidebar

This layout has a vertical but mini sidebar along with a fixed header.

To enable this layout go to src / @jumbo / components / contextProvider / AppContextProvider / defaultContext.js file and update layout option value. like:

layout: LAYOUT_TYPES.VERTICAL_MINIMAL,

3. Vertical - Minimal Sidebar and No Header

This layout has a vertical but mini sidebar and no header.

To enable this layout go to src / @jumbo / components / contextProvider / AppContextProvider / defaultContext.js file and update layout option value. like:

layout: LAYOUT_TYPES.VERTICAL_MINIMAL_NO_HEADER,

4. Vertical - Modern Sidebar and No Header

This layout has a vertical sidebar and all the header options will also be in the sidebar making it a modern design sidebar.

To enable this layout go to src / @jumbo / components / contextProvider / AppContextProvider / defaultContext.js file and update layout option value. like:

layout: LAYOUT_TYPES.VERTICAL_MODERN_SIDEBAR,

5. Horizontal - Default

This layout has no sidebar and all the menu options are present in the header itself.

To enable this layout go to src / @jumbo / components / contextProvider / AppContextProvider / defaultContext.js file and update layout option value. like:

layout: LAYOUT_TYPES.HORIZONTAL_DEFAULT,

6. Horizontal - Dark Layout

This horizontal layout has a dark header.

To enable this layout go to src / @jumbo / components / contextProvider / AppContextProvider / defaultContext.js file and update layout option value. like:

layout: LAYOUT_TYPES.HORIZONTAL_DARK,

7. Horizontal - Minimal Header

This layout has minimal options in the header and the header is compact.

To enable this layout go to src / @jumbo / components / contextProvider / AppContextProvider / defaultContext.js file and update layout option value. like:

layout: LAYOUT_TYPES.HORIZONTAL_MINIMAL,

8. Horizontal - Top Menu Layout

This horizontal layout has Menu items at the top of the header.

To enable this layout go to src / @jumbo / components / contextProvider / AppContextProvider / defaultContext.js file and update layout option value. like:

layout: LAYOUT_TYPES.HORIZONTAL_TOP_MENU,