Open grichard99 opened 2 months ago
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;
}
}
https://github.com/yaminncco/vue-sidebar-menu/assets/42270947/4bd4db1d-8e3c-4152-98e2-de7bad89c6a7
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?