Sidebar

App Drawer Alignment

The drawer is a component that holds the sidebar and controls things such as positioning in the document or within a more complex layout.

You can configure the alignment of the main drawer from store/settings.js. Possible values are start and end. These values correspond to left and right, however they are called start and end because they take RTL into consideration.

App Sidebar Skin

The sidebar is a component that holds various elements like the sidebar menu. It's also responsible for applying a skin to these elements. You can inspect the application sidebar used in the main drawer from vendor/vue-luma/components/Sidebar/Sidebar.vue.

Configure the sidebar skin of the main drawer from store/settings.js. Possible values are light and dark. The values correspond to configuration keys in store/sidebarConfig.js.

Layout Settings

We can have different settings per layout. The following example configures the application sidebar skin and drawer alignment for the boxed layout.