Small Icon Menu Configuration

By default, the layout comes with a small-icon menu. This is a classic, clean design ideal for traditional admin experiences. To apply the small-icon layout, you will need to update the necessary attributes in the resources/assets/js/layout/layout-smallicon.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]:       'small-icon',
    [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,
};

Small Icon Layout:

Steps to Configure Small Icon Layout:

• Locate the [ATTRIBUTES.MAIN_LAYOUT] setting.
• Set the value of [ATTRIBUTES.MAIN_LAYOUT] to 'small-icon' to apply the Small Icon layout.
• In your HTML tag, make sure you add or update the attribute with the value data-main-layout="small-icon" to activate the Small Icon 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.