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,

Structure - Previous

Folder Structure

Next - Style Customization

Color Schemes

Last modified 1yr ago

Copy link