From 2151a85932f4c5b2a0d857cf11a89d78a1f18865 Mon Sep 17 00:00:00 2001
From: Sin-Kang <jlc488@gmail.com>
Date: Wed, 3 Jun 2026 21:26:12 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20responsive=20layout=20=E2=80=94=20mobil?=
 =?UTF-8?q?e=20drawer=20sidebar=20+=20dark=20chrome=20polish?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

On narrow screens (< lg) the sidebar is now an off-canvas drawer: a hamburger
in the header opens it, a backdrop tap (or navigating) closes it. On lg+ it
stays the static sidebar as before. Also lifts the sidebar/header chrome to
surface-900 in dark mode so it reads distinct from the content area.

Built green (vue-tsc + vite).
---
 src/i18n/locales/en.ts   |  1 +
 src/i18n/locales/ko.ts   |  1 +
 src/layout/AppLayout.vue | 43 +++++++++++++++++++++++++++++++++++-----
 3 files changed, 40 insertions(+), 5 deletions(-)

diff --git a/src/i18n/locales/en.ts b/src/i18n/locales/en.ts
index 62ac7b3..d024662 100644
--- a/src/i18n/locales/en.ts
+++ b/src/i18n/locales/en.ts
@@ -4,6 +4,7 @@ export default {
     signOut: 'Sign out',
     toggleTheme: 'Toggle theme',
     toggleLocale: 'Toggle language',
+    openMenu: 'Open menu',
   },
   // One-line description shown under each page title.
   subtitles: {
diff --git a/src/i18n/locales/ko.ts b/src/i18n/locales/ko.ts
index 062cdb1..e97ba1d 100644
--- a/src/i18n/locales/ko.ts
+++ b/src/i18n/locales/ko.ts
@@ -4,6 +4,7 @@ export default {
     signOut: '로그아웃',
     toggleTheme: '테마 전환',
     toggleLocale: '언어 전환',
+    openMenu: '메뉴 열기',
   },
   // 각 페이지 제목 아래 한 줄 설명.
   subtitles: {
diff --git a/src/layout/AppLayout.vue b/src/layout/AppLayout.vue
index 8fbaad4..3a0d72e 100644
--- a/src/layout/AppLayout.vue
+++ b/src/layout/AppLayout.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { useRouter, useRoute, RouterView } from 'vue-router'
 import { useI18n } from 'vue-i18n'
 import Menu from 'primevue/menu'
@@ -14,6 +14,16 @@ const auth = useAuthStore()
 const ui = useUiStore()
 const { t } = useI18n()
 
+// Mobile off-canvas sidebar (drawer). Closes automatically on navigation so
+// tapping a nav item on a phone takes you there and dismisses the drawer.
+const sidebarOpen = ref(false)
+watch(
+  () => route.fullPath,
+  () => {
+    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.
@@ -88,7 +98,18 @@ function toggleLocale() {
 
 <template>
   <div class="flex h-screen">
-    <aside class="w-64 shrink-0 border-r border-surface-200 dark:border-surface-800 bg-surface-0 dark:bg-surface-950 flex flex-col">
+    <!-- Mobile backdrop: tap to dismiss the drawer. -->
+    <div
+      v-if="sidebarOpen"
+      class="fixed inset-0 z-30 bg-black/50 lg:hidden"
+      aria-hidden="true"
+      @click="sidebarOpen = false"
+    ></div>
+
+    <aside
+      class="fixed inset-y-0 left-0 z-40 w-64 shrink-0 border-r border-surface-200 dark:border-surface-800 bg-surface-0 dark:bg-surface-900 flex flex-col transform transition-transform duration-200 ease-in-out lg:static lg:z-auto lg:translate-x-0"
+      :class="sidebarOpen ? 'translate-x-0' : '-translate-x-full'"
+    >
       <div class="px-4 py-4 border-b border-surface-200 dark:border-surface-800 flex items-center gap-2">
         <i class="pi pi-shield text-primary"></i>
         <span class="font-semibold">{{ t('app.title') }}</span>
@@ -99,9 +120,21 @@ function toggleLocale() {
     </aside>
 
     <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-950 flex items-center justify-between px-4">
-        <div class="text-sm text-surface-600 dark:text-surface-400">
-          {{ (route.meta.title as string | undefined) ?? route.name }}
+      <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="text-sm text-surface-600 dark:text-surface-400 truncate">
+            {{ (route.meta.title as string | undefined) ?? route.name }}
+          </div>
         </div>
         <div class="flex items-center gap-2">
           <Button