From 49dbddb92479a7adc79beb52bf6aa19c75a12a12 Mon Sep 17 00:00:00 2001
From: Ivan <e318cbc04468bd574db2b4523dddd710>
Date: Sat, 15 Aug 2026 14:34:27 -0500
Subject: [PATCH] feat: update SidebarLink component with dynamic class
 handling for active and collapsed states

---
 meshchatx.rsm                                 | Bin 195139 -> 195139 bytes
 .../src/frontend/components/SidebarLink.vue   |  20 ++++++++++++++----
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/meshchatx.rsm b/meshchatx.rsm
index 3e976502460e1c12f37afd7ed33008cc1419993d..dadb9198fb7e2a9e8bc7eec90812f4c3150407ac 100644
GIT binary patch
delta 192
zcmV;x06+i3^b5oE3qUzxeBY-EtQ_JVUdSa<E$J=TNYQ?Zt}why$^}BD=Nf~EMuIk1
zr=@&V1ShKawtuJ-`kd0hdB6XAvqU@nU<i>w7$C4{1(r4sYQoQ7RKH-9>dHG>1a9Ue
z5}eYjl1qxP)*i8Vu+u(fIWRLdV>vT2H#1^2Vqs)BFg7(gIW;mcGch$}GdMM7VP-ir
uH8W&lH#Rh5WM(yEWi(|pV`exrFl0GmW|tux0Vact)Q61J0k@3Q0=Ff5u1{A0

delta 192
zcmV;x06+i3^b5oE3qWuD2=pG6I;Aa=?C#VG9JzQddJJ7kR+&`7d3DHg!Z0WyPRPkP
zBrSYMtk*RxkXTdTS5WGr<2{1hl_}JXaSM?^7$7r@A$}16`T=23MAAq|!#8B@Okdl?
zqp0`p>DI~`Y3{Lju+u*>HD)t3W@0rnH8wF}GBsskGcY)1HDhKpW;Z!CG-WwCWH~l7
uWjAIqWi&Q5H8?jnGBso|VPP^eW;HM}HaU|K{Uw8p)Q61J0k@3Q0=Fd!eor$1

diff --git a/meshchatx/src/frontend/components/SidebarLink.vue b/meshchatx/src/frontend/components/SidebarLink.vue
index c3c3072d..1246a542 100644
--- a/meshchatx/src/frontend/components/SidebarLink.vue
+++ b/meshchatx/src/frontend/components/SidebarLink.vue
@@ -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) {