reticulum-ref/MeshChatX
1
0
Fork 0
mirror of https://github.com/Quad4-Software/MeshChatX.git synced 2026-08-18 09:49:09 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: update SidebarLink component with dynamic class handling for active and collapsed states

Browse source
This commit is contained in:
Ivan 2026-08-15 14:34:27 -05:00
parent 62c542bea5
commit 49dbddb924
No known key found for this signature in database
2 changed files with 16 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
meshchatx.rsm
View file

Binary file not shown.

20
meshchatx/src/frontend/components/SidebarLink.vue
View file

@ -7,10 +7,8 @@
type="button"
:draggable="false"
:class="[
isActive
? 'bg-blue-100 text-blue-800 group:text-blue-800 dark:bg-zinc-800 dark:text-blue-300'
: 'hover:bg-gray-100 dark:hover:bg-zinc-700',
isCollapsed ? 'overflow-visible justify-center rounded-lg' : 'overflow-hidden rounded-r-full mr-2',
collapsedActiveClass(isActive),
isCollapsed ? 'overflow-visible justify-center rounded-none' : 'overflow-hidden rounded-r-full mr-2',
]"
class="w-full text-gray-800 dark:text-zinc-200 group flex gap-x-3 p-2 text-sm leading-6 font-semibold focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600 dark:focus-visible:outline-zinc-500"
@click="handleNavigate($event, navigate)"
@ -44,6 +42,20 @@ export default {
},
emits: ["click"],
methods: {
collapsedActiveClass(isActive) {
if (this.isCollapsed && isActive) {
return [
"text-blue-800 dark:text-blue-300",
"bg-black/[0.04] dark:bg-black/40",
"shadow-[inset_2px_2px_5px_rgba(0,0,0,0.18),inset_-1px_-1px_2px_rgba(255,255,255,0.8)]",
"dark:shadow-[inset_2px_2px_6px_rgba(0,0,0,0.72),inset_-1px_-1px_1px_rgba(255,255,255,0.07)]",
].join(" ");
}
if (isActive) {
return "bg-blue-100 text-blue-800 group:text-blue-800 dark:bg-zinc-800 dark:text-blue-300";
}
return "hover:bg-gray-100 dark:hover:bg-zinc-700";
},
handleNavigate(event, navigate) {
this.$emit("click");
if (this.editMode) {