From 966a4315c89e9ed5b7eb0e0ae765d47af9587e98 Mon Sep 17 00:00:00 2001
From: hyungi <hyun49196@gmail.com>
Date: Tue, 30 Jun 2026 06:29:33 +0000
Subject: [PATCH] =?UTF-8?q?feat(shell):=20=EC=8B=9C=EC=95=88B=20=EC=8A=AC?=
 =?UTF-8?q?=EB=A6=BC=20=EC=95=84=EC=9D=B4=EC=BD=98=20=EB=A0=88=EC=9D=BC=20?=
 =?UTF-8?q?=E2=80=94=20=EC=82=AC=EC=9D=B4=EB=93=9C=EB=B0=94=20=EC=A0=91?=
 =?UTF-8?q?=ED=9E=98=3D54px=20=EA=B8=80=EB=A1=9C=EB=B2=8C=20=EB=84=A4?=
 =?UTF-8?q?=EB=B9=84(=EC=88=A8=EA=B9=80=20=EB=8C=80=EC=8B=A0)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/lib/components/SlimRail.svelte | 33 +++++++++++++++++++++
 frontend/src/routes/+layout.svelte          |  5 ++--
 2 files changed, 36 insertions(+), 2 deletions(-)
 create mode 100644 frontend/src/lib/components/SlimRail.svelte

diff --git a/frontend/src/lib/components/SlimRail.svelte b/frontend/src/lib/components/SlimRail.svelte
new file mode 100644
index 0000000..b932031
--- /dev/null
+++ b/frontend/src/lib/components/SlimRail.svelte
@@ -0,0 +1,33 @@
+<script>
+  // 시안 B — 글로벌 네비 슬림 아이콘 레일 (분류 사이드바 접힘 상태). 앱 토큰 사용.
+  import { page } from '$app/stores';
+  import { Home, FolderTree, Newspaper, StickyNote, Hash, GraduationCap, MessageCircle, Inbox, CalendarCheck } from 'lucide-svelte';
+
+  const items = [
+    { href: '/', icon: Home, label: '홈', exact: true },
+    { href: '/library', icon: FolderTree, label: '문서' },
+    { href: '/news', icon: Newspaper, label: '뉴스' },
+    { href: '/memos', icon: StickyNote, label: '메모' },
+    { href: '/clause', icon: Hash, label: '절' },
+    { href: '/events', icon: CalendarCheck, label: '일정' },
+    { href: '/study', icon: GraduationCap, label: '공부' },
+    { href: '/chat', icon: MessageCircle, label: '이드' },
+    { href: '/inbox', icon: Inbox, label: '편지함' },
+  ];
+  let path = $derived($page.url.pathname);
+  const active = (it) => (it.exact ? path === it.href : path.startsWith(it.href));
+</script>
+
+<nav class="flex flex-col items-center gap-1 py-2 h-full overflow-y-auto bg-sidebar">
+  {#each items as it (it.href)}
+    {@const Icon = it.icon}
+    <a
+      href={it.href}
+      title={it.label}
+      class="flex flex-col items-center justify-center gap-0.5 w-12 h-[46px] rounded-lg text-dim hover:bg-surface-hover hover:text-accent transition-colors {active(it) ? 'bg-surface-active text-accent font-semibold' : ''}"
+    >
+      <Icon size={17} strokeWidth={1.75} />
+      <span class="text-[8.5px] leading-none tracking-tight">{it.label}</span>
+    </a>
+  {/each}
+</nav>
diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte
index ef45138..384a8a7 100644
--- a/frontend/src/routes/+layout.svelte
+++ b/frontend/src/routes/+layout.svelte
@@ -11,6 +11,7 @@
   import { queueOverview } from '$lib/stores/queueOverview';
   import { MACHINE_STATE_LABEL, machineChipClass } from '$lib/utils/queueDisplay';
   import Sidebar from '$lib/components/Sidebar.svelte';
+  import SlimRail from '$lib/components/SlimRail.svelte';
   import SystemStatusDot from '$lib/components/SystemStatusDot.svelte';
   import QueueDrawer from '$lib/components/QueueDrawer.svelte';
   import QuickMemoButton from '$lib/components/QuickMemoButton.svelte';
@@ -198,8 +199,8 @@
       <!-- 메인: 데스크탑 상시 사이드바 + 콘텐츠 -->
       <div class="flex-1 min-h-0 flex">
         {#if showSidebar}
-          <aside class="hidden lg:block shrink-0 overflow-hidden transition-[width] duration-200 ease-out {sidebarCollapsed ? 'w-0 border-r-0' : 'w-sidebar border-r border-default'}">
-            <Sidebar />
+          <aside class="hidden lg:block shrink-0 overflow-hidden transition-[width] duration-200 ease-out {sidebarCollapsed ? 'w-14 border-r border-default' : 'w-sidebar border-r border-default'}">
+            {#if sidebarCollapsed}<SlimRail />{:else}<Sidebar />{/if}
           </aside>
         {/if}
         <main class="flex-1 min-w-0 overflow-auto">