Semi Box Menu Configuration

By default, the layout comes with a Semi Box menu. This is a classic, clean design ideal for traditional admin experiences. To apply the Semi Box layout, you will need to update the necessary attributes in the reosurces/assets/js/layout/layout-semibox.js file. You need to add the required attributes in the HTML tag or update the values of the existing attributes. Once you've made the changes, remember to clear your browser cache or open the page in incognito mode to see the changes reflected.

Default Values:

const DEFAULT_VALUES = {
    [ATTRIBUTES.MAIN_LAYOUT]:       'semi-boxed',
    [ATTRIBUTES.THEME]:             'auto',
    [ATTRIBUTES.THEME_COLOR]:       'primary',
    [ATTRIBUTES.DIRECTION_MODE]:    'ltr',
    [ATTRIBUTES.SIDEBAR]:           'dark-sidebar',
    [ATTRIBUTES.NAV_POSITION]:      'sticky',
    [ATTRIBUTES.NAV_TYPE]:          'default',
    [ATTRIBUTES.FONT_HEADING]:      'Poppins',
    [ATTRIBUTES.FONT_BODY]:         'Inter',
    [ATTRIBUTES.FONT_SIZE]:         'md',
    [ATTRIBUTES.LAYOUT_ROUNDED]:    'md',
    [ATTRIBUTES.LAYOUT_CONTAINER]:  'fluid',
    [ATTRIBUTES.PAGE_LOADER]:       'visible',
    [ATTRIBUTES.AUTH_LAYOUT]:       typeof AUTH_LAYOUT === 'undefined' ? false : AUTH_LAYOUT,
};

Semi Box Layout:

Steps to Configure Semi Box Layout:

• Locate the [ATTRIBUTES.MAIN_LAYOUT] setting.
• Set the value of [ATTRIBUTES.MAIN_LAYOUT] to 'Semi Box' to apply the Semi Box layout.
• In your HTML tag, make sure you add or update the attribute with the value data-main-layout="Semi Box" to activate the Semi Box menu.
• Save the changes and refresh your browser (clear cache or use incognito mode if changes don’t appear immediately).

Content Width:

Steps to Configure Content Width:

• locate the [ATTRIBUTES.LAYOUT_CONTAINER] variable.
• Choose between 'fluid' for full-width content or 'boxed' for a boxed content layout.
• Update the value accordingly and save the file.
• Refresh your browser to apply the new content width setting.

Sidebar Colors:

Steps to Configure Sidebar Colors:

• Locate the [ATTRIBUTES.SIDEBAR] variable.
• Set the sidebar colors to either 'light-sidebar', 'dark-sidebar', or 'gradient-sidebar' based on your preference.
• Save the changes to the file.
• Ensure you clear the cache or use incognito mode to view the updated sidebar color changes in your browser.