Messaging Icon Badge While Collapsed

[grichard99]

I would like to know if there is a way to add a badge to an icon while the menu bar is collapsed. Badges show very nice when expanded and on hover, but I would like to know if there is a way for the badge to still show even when fully collapsed?

For instance, while it is just a side bar menu and not hovered, I would like a red badge over the message icon with a number, say "3", just like iPhone iMessages show you have new messages.

Is this possible?

[yaminncco]

You can create an icon component that have both the icon and the badge. example:

import { h } from 'vue'

...
icon: {
  element: () => {
    return h('div', { style: { position: 'relative' } }, [
      h(FontAwesomeIcon, { size: 'lg', icon: 'fa-solid fa-cog' }),
      h('span', { class: 'icon-badge' }, '3'),
    ])
  },
},

<style>
.icon-badge {
  position: absolute;
  right: -7px;
  top: -7px;
  width: 15px;
  height: 15px;
  background-color: red;
  color: #fff;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}
</style>

[rubjo]

How could this badge easily be updated? Would you consider supporting this more "natively", like .badge by default affects rendering of the expanded menu items?

[rubjo]

Actually, this was possible (at least for my particular setup) using some CSS trickery:

    .vsm--title {
      position: relative;
    }

    .vsm--title_hidden {
      .vsm--badge {
        position: absolute;
        z-index: 20;
        right: -0.25rem;
        bottom: 0.5rem;
        font-size: 75%;
        outline: 2px solid var(--menu-bg);
        visibility: visible;
      }
    }

https://github.com/yaminncco/vue-sidebar-menu/assets/42270947/4bd4db1d-8e3c-4152-98e2-de7bad89c6a7