Template Settings

This topic covers the detail about the default setting options for the template.

To customize and update default settings you need to go to:

src / @jumbo / components / contextProvider / AppContextProvider /

And then open defaultContext.js file.

In this file, you can see all the available settings for that specific layout and can make your required changes here.

Settings Options

All settings options are defined in src / @jumbo / constants / themeOptions.js file

• theme Here you can set the default theme for your project.

• defaultLng Here you can set the default language you want to enable for your project. Following is an example value for the English language which you will find the default language set in

  {
    languageId: 'english',
    locale: 'en',
    name: 'English',
    icon: 'us',
  }

  Note: For more information check the detailed topic https://docs-jumbo.g-axon.work/settings/language

• layout Here you can set the default layout for your project. All possible values for this object key can be found inside the src / @jumbo / constants / themeOptions.js in the constant LAYOUT_TYPES.

• layoutType The layoutType is to set the container width of the page. There are three possible values for this object key:

  • LAYOUT_STYLES.BOXED

  • LAYOUT_STYLES.FULL_WIDTH

  • LAYOUT_STYLES.FRAMED

• themeType This option is to set the shade of your project theme. There are three possible values for this object key:

  • THEME_TYPES.LIGHT

  • THEME_TYPES.SEMI_DARK

  • THEME_TYPES.DARK

• drawerBreakPoint Here you can set the breakpoint for the drawer. Below this breakpoint, the drawer (sidebar) will hide and will be available to show or hide with a toggle button. There are three breakpoints defined in the default however, you can define your own custom breakpoint too. Following the default breakpoints defined:

  • DRAWER_BREAK_POINT.SX

  • DRAWER_BREAK_POINT.SM

  • DRAWER_BREAK_POINT.MD

• headerType This option is to set the type of header you want in your layout. There are two possible values of this object key:

  • HEADER_TYPE.FIXED

  • HEADER_TYPE.STATIC

  Note: This option will only work with the layouts having vertical navigation (sidebar).

• sidebarType This object key can be used to set the type of sidebar you want to use in your project. There are three possible values for this object key:

  • SIDEBAR.FULL

  • SIDEBAR.MINI

  • SIDEBAR.DRAWER

  Note: This option will only work with the layouts having vertical navigation (sidebar).

• isSidebarFixed If value for this object key is set to true then the sidebar will behave as a fixed sidebar with scrollbar to scroll the inside content. Otherwise, if set to false, then the sidebar will scroll as the page scrolls. Note: This option will only work with the layouts having vertical navigation (sidebar).

• sidebarWidth You can use this object key to set the width of the sidebar. There are following three pre-defined width constants:

  • SIDEBAR_WIDTH.DEFAULT

  • SIDEBAR_WIDTH.SMALL

  • SIDEBAR_WIDTH.WIDE

    ​

  Note: 1. You can update value for above constants or can define a new width by extending the object defined in src / @jumbo / constants / themeOptions.js

  2. This option only works with the layouts have vertical navigation (sidebar)

• showFooter Option type is boolean. set true value to show footer.