App Shell 三態 · 設計初版

側欄（LOGO＋導覽＋使用者）的三個狀態。三態本身是元件層（Sidebar／SidebarMenuButton 的 Collapsed、Size 軸），切換時機是這一層的規則。

示範內容一律中性；服務名、導覽樹與使用者由子系統接入時提供。

① 展開 — LOGO＋服務名＋icon＋項目名（寬 256）

服務名稱

導覽

K

成員 K

管理員

內容區

側欄 256px

內容 192px

② 收合 — 只剩 LOGO 與 icon（寬 48）

K

內容區

側欄 48px

內容 400px

③ 緊湊收合 — 項目 > 8 個，icon 更小更密（寬 48）

K

內容區

側欄 48px

內容 400px

切換規則（暫定，可改）

① 導覽項目超過 8 個 → 轉 compact（SidebarMenuButton size=sm；收合時 28px 方格＋14px icon）。

② 視窗寬 < 1024（breakpoint lg）→ 自動收合。

③ 使用者手動收合或展開要記住（code 的 sidebar_state cookie），下次進站沿用。

④ 收合時 hover 項目只顯示 tooltip（項目名），不把側欄展開。