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.
export const state = () => ({
state: {
'default::mainDrawer': {
align: 'start'
}
}
})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.
export const state = () => ({
state: {
'default::mainDrawer': {
sidebar: 'dark'
}
}
})Layout Settings
We can have different settings per layout. The following example configures the application sidebar skin and drawer alignment for the boxed layout.
export const state = () => ({
state: {
'boxed::mainDrawer': {
align: 'start',
sidebar: 'light'
}
}
})Frontend Matter
Beautifully crafted Bootstrap themes and templates for modern web apps.
Copyright 2020 © All rights reserved.
Illustrations by Freepik Storyset