how to move a menu item to the bottom
anubisg1 opened this issue · comments
How can i move an entry at the bottom of the menu ?
for example i'd like to move the "settings" menu entry at the bottom of the screen
We can achieve this with flex and margin-top auto.
First add css flex to the menu
.v-sidebar-menu .vsm--menu {
display: flex;
flex-direction: column;
height: 100%;
}
Then create a component that push everything that comes after it to the bottom
import { h, markRaw } from 'vue'
const pushToBottom = markRaw({
render: () => h('div'),
mounted () {
const itemEl = this.$el.parentElement
itemEl.style.marginTop = 'auto'
}
})
menu: [
...
{
component: pushToBottom
},
{
title: 'Settings'
}
]
oh thanks a lot! let me try that out!