From f8ef8141f554e084668a20e6d38508f9b4cdeb16 Mon Sep 17 00:00:00 2001
From: Nico <nico@openclaw>
Date: Fri, 3 Apr 2026 22:31:41 +0200
Subject: [PATCH] Simplify sidebar state: session storage, always start
 collapsed
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Remove media query resize listener and responsive auto-expand/collapse logic.
Start collapsed by default, persist user choice in sessionStorage (cleared on
browser close). No width-based rules — same behavior on desktop and mobile.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/components/AppSidebar.vue | 26 ++++++++------------------
 1 file changed, 8 insertions(+), 18 deletions(-)

diff --git a/src/components/AppSidebar.vue b/src/components/AppSidebar.vue
index bbabcea..941f8af 100644
--- a/src/components/AppSidebar.vue
+++ b/src/components/AppSidebar.vue
@@ -29,6 +29,10 @@
                 <ChatBubbleLeftRightIcon class="w-4 h-4" />
                 <span>nyx</span>
             </button>
+            <RouterLink v-if="isLoggedIn" to="/tests" class="sidebar-link" :class="{ active: route.name === 'tests' }" @click="collapse">
+                <BeakerIcon class="w-4 h-4" />
+                <span>Tests</span>
+            </RouterLink>
         </div>
 
         <!-- Spacer -->
@@ -84,6 +88,7 @@ import {
     DocumentTextIcon,
     ShieldCheckIcon,
     HomeIcon,
+    BeakerIcon,
 } from '@heroicons/vue/20/solid';
 import { THEME_ICONS, THEME_LOGOS, THEME_NAMES, useTheme } from '../composables/useTheme';
 import { auth } from '../store';
@@ -97,32 +102,17 @@ const navLogo = computed(() => THEME_LOGOS[theme.value]);
 
 const { isLoggedIn, currentUser } = auth;
 
-const isMobile = window.innerWidth <= 480;
-const isLarge = window.innerWidth >= 1024;
-const isOpen = ref(isMobile ? false : isLarge ? true : localStorage.getItem('sidebar_open') !== 'false');
+const isOpen = ref(sessionStorage.getItem('sidebar_open') === 'true');
 const userMenuOpen = ref(false);
 
-// Auto-collapse when crossing from lg → md
-const lgQuery = window.matchMedia('(min-width: 1024px)');
-lgQuery.addEventListener('change', (e) => {
-    if (e.matches && !isOpen.value) {
-        isOpen.value = true;
-        localStorage.setItem('sidebar_open', 'true');
-    } else if (!e.matches && isOpen.value) {
-        isOpen.value = false;
-        localStorage.setItem('sidebar_open', 'false');
-    }
-});
-
 function toggle() {
     isOpen.value = !isOpen.value;
-    localStorage.setItem('sidebar_open', String(isOpen.value));
+    sessionStorage.setItem('sidebar_open', String(isOpen.value));
 }
 
 function collapse() {
-    if (window.innerWidth >= 1024) return;
     isOpen.value = false;
-    localStorage.setItem('sidebar_open', 'false');
+    sessionStorage.setItem('sidebar_open', 'false');
 }
 
 function goNyx() {