using "long" icon with open menu, and small "standard" when menu is compressed
anubisg1 opened this issue · comments
What i would like to achieve is that the very first menu entry, would be only an icon taking a wider space so that i can include my complete company logo.
when the menu is minimized then i would replace that icon with the "favico" icon that's square a fits everything else ...
i'm having some issue doing this.
Of course i'd need to disable hovering too.
i tried
{
icon: {
element: "img",
attributes: {
src: "/src/assets/company-logo-small-wb.png",
},
class: "company-logo"
},
disableHover: true,
},
but disabe Hover doesn't seem to work
basically similar to this:
any tip , is that even possible?
thanks a lot for your helo
I suggest to use header slot
<sidebar-menu v-model:collapsed="collapsed">
<template #header>
<div v-if="collapsed">
Logo
</div>
<div v-else>
Long logo
</div>
</template>
</sidebar-menu>
this worked well, thank you