Two Column Menu Configuration

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

Two Column Layout:

Steps to Configure Two Column Layout:

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

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.