From 8aee95f2772a6fca0c0f11bf01311fcbf3b3be61 Mon Sep 17 00:00:00 2001
From: Sin-Kang <jlc488@gmail.com>
Date: Wed, 3 Jun 2026 22:56:15 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20sidebar=20drawer=20stuck=20open=20after?=
 =?UTF-8?q?=20desktop=E2=86=92mobile=20resize?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Two responsive bugs on the app shell:

1. The mobile hamburger could show on desktop. `lg:hidden` was on the
   PrimeVue <Button>, whose component display style can win over the
   utility — so it leaked onto wide screens. Wrap it in a
   <div class="lg:hidden"> so the button is reliably hidden at lg+.

2. The drawer stayed open after a resize round-trip. `sidebarOpen` was
   only reset on navigation, so opening it, growing to desktop, then
   shrinking back left the sidebar stuck visible on mobile. Watch a
   (min-width: 1024px) media query and reset the flag whenever the
   viewport reaches desktop.

Verification: npm run build (vue-tsc + Vite) green.
---
 src/layout/AppLayout.vue | 31 +++++++++++++++++++++----------
 1 file changed, 21 insertions(+), 10 deletions(-)

diff --git a/src/layout/AppLayout.vue b/src/layout/AppLayout.vue
index 3a0d72e..c0a74f9 100644
--- a/src/layout/AppLayout.vue
+++ b/src/layout/AppLayout.vue
@@ -2,6 +2,7 @@
 import { computed, ref, watch } from 'vue'
 import { useRouter, useRoute, RouterView } from 'vue-router'
 import { useI18n } from 'vue-i18n'
+import { useMediaQuery } from '@vueuse/core'
 import Menu from 'primevue/menu'
 import Button from 'primevue/button'
 import { useAuthStore } from '@/stores/auth'
@@ -24,6 +25,15 @@ watch(
   },
 )
 
+// Once the viewport reaches desktop the sidebar is always shown (lg:static), so
+// the drawer flag is meaningless there. Reset it on the way up so a stale "open"
+// can't carry back down to mobile and leave the sidebar stuck visible after a
+// resize round-trip.
+const isDesktop = useMediaQuery('(min-width: 1024px)')
+watch(isDesktop, (desktop) => {
+  if (desktop) sidebarOpen.value = false
+})
+
 // Account dropdown anchored on the header username. PrimeVue's Menu in popup
 // mode exposes toggle(event); type just that surface to avoid depending on an
 // unexported component type.
@@ -122,16 +132,17 @@ function toggleLocale() {
     <div class="flex-1 flex flex-col min-w-0">
       <header class="h-14 border-b border-surface-200 dark:border-surface-800 bg-surface-0 dark:bg-surface-900 flex items-center justify-between px-4">
         <div class="flex items-center gap-2 min-w-0">
-          <Button
-            class="lg:hidden"
-            text
-            rounded
-            severity="secondary"
-            icon="pi pi-bars"
-            v-tooltip.top="t('app.openMenu')"
-            :aria-label="t('app.openMenu')"
-            @click="sidebarOpen = true"
-          />
+          <div class="lg:hidden">
+            <Button
+              text
+              rounded
+              severity="secondary"
+              icon="pi pi-bars"
+              v-tooltip.top="t('app.openMenu')"
+              :aria-label="t('app.openMenu')"
+              @click="sidebarOpen = true"
+            />
+          </div>
           <div class="text-sm text-surface-600 dark:text-surface-400 truncate">
             {{ (route.meta.title as string | undefined) ?? route.name }}
           </div>