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: 
1
layout: LAYOUT_TYPES.VERTICAL_DEFAULT,
Copied!
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: 
1
layout: LAYOUT_TYPES.VERTICAL_MINIMAL,
Copied!
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: 
1
layout: LAYOUT_TYPES.VERTICAL_MINIMAL_NO_HEADER,
Copied!
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: 
1
layout: LAYOUT_TYPES.VERTICAL_MODERN_SIDEBAR,
Copied!
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: 
1
layout: LAYOUT_TYPES.HORIZONTAL_DEFAULT,
Copied!
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: 
1
layout: LAYOUT_TYPES.HORIZONTAL_DARK,
Copied!
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: 
1
layout: LAYOUT_TYPES.HORIZONTAL_MINIMAL,
Copied!
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: 
1
layout: LAYOUT_TYPES.HORIZONTAL_TOP_MENU,
Copied!

Structure - Previous

Folder Structure

Next - Style Customization

Color Schemes

Last modified 1yr ago

Copy link