gitea/nyx
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Simplify sidebar state: session storage, always start collapsed

Browse Source 
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>
This commit is contained in:
Nico 2026-04-03 22:31:41 +02:00
parent 4dacde9ec1
commit f8ef8141f5
1 changed files with 8 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/components/AppSidebar.vue
View File

@ -29,6 +29,10 @@
<ChatBubbleLeftRightIcon class="w-4 h-4" /> <ChatBubbleLeftRightIcon class="w-4 h-4" />
<span>nyx</span> <span>nyx</span>
</button> </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> </div>
<!-- Spacer --> <!-- Spacer -->
@ -84,6 +88,7 @@ import {
DocumentTextIcon, DocumentTextIcon,
ShieldCheckIcon, ShieldCheckIcon,
HomeIcon, HomeIcon,
BeakerIcon,
} from '@heroicons/vue/20/solid'; } from '@heroicons/vue/20/solid';
import { THEME_ICONS, THEME_LOGOS, THEME_NAMES, useTheme } from '../composables/useTheme'; import { THEME_ICONS, THEME_LOGOS, THEME_NAMES, useTheme } from '../composables/useTheme';
import { auth } from '../store'; import { auth } from '../store';
@ -97,32 +102,17 @@ const navLogo = computed(() => THEME_LOGOS[theme.value]);
const { isLoggedIn, currentUser } = auth; const { isLoggedIn, currentUser } = auth;
const isMobile = window.innerWidth <= 480; const isOpen = ref(sessionStorage.getItem('sidebar_open') === 'true');
const isLarge = window.innerWidth >= 1024;
const isOpen = ref(isMobile ? false : isLarge ? true : localStorage.getItem('sidebar_open') !== 'false');
const userMenuOpen = ref(false); 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() { function toggle() {
isOpen.value = !isOpen.value; isOpen.value = !isOpen.value;
localStorage.setItem('sidebar_open', String(isOpen.value)); sessionStorage.setItem('sidebar_open', String(isOpen.value));
} }
function collapse() { function collapse() {
if (window.innerWidth >= 1024) return;
isOpen.value = false; isOpen.value = false;
localStorage.setItem('sidebar_open', 'false'); sessionStorage.setItem('sidebar_open', 'false');
} }
function goNyx() { function goNyx() {