Messaging Icon Badge While Collapsed
grichard99 opened this issue · comments
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?
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>
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?
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;
}
}