Compact Menu Configuration

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

Compact Layout:

Steps to Configure Compact Layout:

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