diff --git a/meshchatx.rsm b/meshchatx.rsm index 3e976502..dadb9198 100644 Binary files a/meshchatx.rsm and b/meshchatx.rsm differ 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) {