사이드바 접기 기능 추가

2026-06-04 15:56:33 +09:00
parent f6c7cb3b22
commit 1596342d03
16 changed files with 277 additions and 33 deletions
--- a/common/shell/AppSidebar.tsx
+++ b/common/shell/AppSidebar.tsx
@@ -1,3 +1,4 @@
+import { Menu, SquareMenu } from "lucide-react";
 import type { ComponentType, ReactNode } from "react";
 import { shellLayoutClasses } from "./layout";

@@ -14,9 +15,13 @@ export type ShellSidebarNavItem = {
 type ShellSidebarProps = {
  brandLabel: string;
  brandTitle: string;
-  brandIcon: ReactNode;
+  brandIcon?: ReactNode;
  navContent: ReactNode;
  footerContent: ReactNode;
+  collapsed?: boolean;
+  onToggleCollapsed?: () => void;
+  collapseLabel?: string;
+  expandLabel?: string;
 };

 export function AppSidebar({
@@ -25,14 +30,57 @@ export function AppSidebar({
  brandIcon,
  navContent,
  footerContent,
+  collapsed = false,
+  onToggleCollapsed,
+  collapseLabel = "Collapse sidebar",
+  expandLabel = "Expand sidebar",
 }: ShellSidebarProps) {
  return (
-    <aside className={shellLayoutClasses.aside}>
+    <aside
+      className={
+        collapsed ? shellLayoutClasses.asideCollapsed : shellLayoutClasses.aside
+      }
+    >
      <div>
-        <div className={shellLayoutClasses.brandSection}>
-          <div className={shellLayoutClasses.brandWrap}>
-            <div className={shellLayoutClasses.brandIcon}>{brandIcon}</div>
-            <div>
+        <div
+          className={
+            collapsed
+              ? shellLayoutClasses.brandSectionCollapsed
+              : shellLayoutClasses.brandSection
+          }
+        >
+          <div
+            className={
+              collapsed
+                ? shellLayoutClasses.brandWrapCollapsed
+                : shellLayoutClasses.brandWrap
+            }
+          >
+            {onToggleCollapsed ? (
+              <button
+                type="button"
+                onClick={onToggleCollapsed}
+                className="grid h-11 w-11 place-items-center rounded-xl border border-border bg-primary/15 text-primary shadow-[0_12px_30px_rgba(54,211,153,0.22)] transition hover:bg-primary/20"
+                aria-label={collapsed ? expandLabel : collapseLabel}
+                title={collapsed ? expandLabel : collapseLabel}
+              >
+                <span className="sr-only">
+                  {collapsed ? expandLabel : collapseLabel}
+                </span>
+                {collapsed ? <Menu size={20} /> : <SquareMenu size={20} />}
+              </button>
+            ) : (
+              <div
+                className={
+                  collapsed
+                    ? shellLayoutClasses.brandIconCollapsed
+                    : shellLayoutClasses.brandIcon
+                }
+              >
+                {brandIcon}
+              </div>
+            )}
+            <div className={collapsed ? "hidden" : "block"}>
              <p className="text-xs uppercase tracking-[0.18em] text-muted-foreground">
                {brandLabel}
              </p>
@@ -40,7 +88,15 @@ export function AppSidebar({
            </div>
          </div>
        </div>
-        <nav className={shellLayoutClasses.navWrap}>{navContent}</nav>
+        <nav
+          className={
+            collapsed
+              ? shellLayoutClasses.navWrapCollapsed
+              : shellLayoutClasses.navWrap
+          }
+        >
+          {navContent}
+        </nav>
      </div>

      <div>{footerContent}</div>
--- a/common/shell/index.ts
+++ b/common/shell/index.ts
@@ -27,6 +27,8 @@ type ShellProfileSummaryParams = {

 export const SHELL_THEME_STORAGE_KEY = "admin_theme";
 export const SHELL_SESSION_EXPIRY_STORAGE_KEY = SESSION_EXPIRY_STORAGE_KEY;
+export const SHELL_SIDEBAR_COLLAPSED_STORAGE_KEY =
+  "baron_shell_sidebar_collapsed";
 export type { ShellSidebarNavItem } from "./AppSidebar";
 export { AppSidebar } from "./AppSidebar";
 export { shellLayoutClasses } from "./layout";
@@ -52,6 +54,25 @@ export function writeShellSessionExpiryEnabled(isEnabled: boolean) {
  writeSessionExpiryEnabled(isEnabled);
 }

+export function readShellSidebarCollapsed(defaultCollapsed = false) {
+  const stored = window.localStorage.getItem(
+    SHELL_SIDEBAR_COLLAPSED_STORAGE_KEY,
+  );
+
+  if (stored === null) {
+    return defaultCollapsed;
+  }
+
+  return stored === "true";
+}
+
+export function writeShellSidebarCollapsed(isCollapsed: boolean) {
+  window.localStorage.setItem(
+    SHELL_SIDEBAR_COLLAPSED_STORAGE_KEY,
+    String(isCollapsed),
+  );
+}
+
 export function buildShellProfileSummary({
  profileName,
  profileEmail,
--- a/common/shell/layout.ts
+++ b/common/shell/layout.ts
@@ -1,22 +1,34 @@
 export const shellLayoutClasses = {
  root: "grid min-h-screen grid-cols-[240px,minmax(0,1fr)] bg-background text-foreground",
+  rootCollapsed:
+    "grid min-h-screen grid-cols-[80px,minmax(0,1fr)] bg-background text-foreground",
  aside:
    "sticky top-0 flex h-screen flex-col justify-between border-r border-border bg-card backdrop-blur",
+  asideCollapsed:
+    "sticky top-0 flex h-screen flex-col justify-between border-r border-border bg-card backdrop-blur",
  asideStatic:
    "sticky top-0 h-screen border-r border-border bg-card backdrop-blur",
  brandSection:
    "flex items-center justify-between px-5 py-4 md:block md:space-y-6 md:py-6",
+  brandSectionCollapsed:
+    "flex items-center justify-between px-3 py-4 md:block md:space-y-4 md:px-2 md:py-6",
  brandWrap: "flex items-center gap-3 md:flex-col md:items-start",
+  brandWrapCollapsed: "flex items-center gap-3 md:flex-col md:items-center",
  brandIcon:
    "grid h-11 w-11 place-items-center rounded-xl bg-primary/15 text-primary shadow-[0_12px_30px_rgba(54,211,153,0.22)]",
+  brandIconCollapsed:
+    "grid h-11 w-11 place-items-center rounded-xl bg-primary/15 text-primary shadow-[0_12px_30px_rgba(54,211,153,0.22)]",
  scopeBadge:
    "hidden rounded-full border border-border px-3 py-2 text-xs text-muted-foreground md:inline-flex md:items-center md:gap-2",
  navWrap: "px-2 pb-4 md:px-3 md:pb-8",
+  navWrapCollapsed: "px-2 pb-4 md:px-2 md:pb-8",
  navMeta:
    "flex flex-wrap gap-2 px-3 pb-4 text-[11px] text-muted-foreground md:flex-col md:items-start",
  navList: "flex flex-col gap-1",
  navItemBase:
    "flex items-center gap-3 rounded-xl px-3 py-3 text-sm transition",
+  navItemBaseCollapsed:
+    "flex items-center justify-center gap-0 rounded-xl px-3 py-3 text-sm transition",
  navItemActive:
    "bg-primary/10 text-primary shadow-[0_12px_40px_rgba(54,211,153,0.18)]",
  navItemIdle: "text-muted-foreground hover:bg-muted/10 hover:text-foreground",
@@ -24,6 +36,8 @@ export const shellLayoutClasses = {
    "hidden space-y-2 px-5 pb-6 pt-2 text-xs text-[var(--color-muted)] md:block",
  logoutButton:
    "flex w-full items-center gap-3 rounded-xl px-3 py-3 text-sm text-muted-foreground transition hover:bg-destructive/10 hover:text-destructive",
+  logoutButtonCollapsed:
+    "flex w-full items-center justify-center gap-0 rounded-xl px-3 py-3 text-sm text-muted-foreground transition hover:bg-destructive/10 hover:text-destructive",
  header:
    "sticky top-0 z-20 border-b border-border bg-background/90 backdrop-blur",
  headerElevated:
@@ -31,8 +45,11 @@ export const shellLayoutClasses = {
  headerInner: "flex items-center justify-between px-5 py-4 md:px-8",
  headerTitleWrap: "flex flex-col gap-1",
  headerActions: "flex items-center gap-2 text-sm",
+  headerActionsCollapsed: "flex items-center gap-2 text-sm",
  actionButton:
    "inline-flex items-center gap-2 rounded-full border border-border px-3 py-2 text-muted-foreground transition hover:bg-muted/20",
+  sidebarToggleButton:
+    "inline-flex items-center gap-2 rounded-full border border-border px-3 py-2 text-muted-foreground transition hover:bg-muted/20",
  sessionBadge:
    "hidden rounded-full border px-3 py-2 text-xs font-medium md:inline-flex",
  profileInitial: