how to move a menu item to the bottom

[anubisg1]

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

[yaminncco]

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'
  }
]

[anubisg1]

oh thanks a lot! let me try that out!

[anubisg1]

it works perfectly! thank you