using "long" icon with open menu, and small "standard" when menu is compressed

[anubisg1]

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

[yaminncco]

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>

[anubisg1]

this worked well, thank you