浮动玻璃导航系统

概述

一种将侧边栏和顶栏作为 固定定位的毛玻璃浮动面板，并通过状态联动实现同步动画的导航系统。

其核心特征是：

导航面板不贴边（距视口 12px），配合大圆角形成”药丸形浮动”轮廓；
使用 glass-strong（40px blur + 1.6 saturate）毛玻璃效果，背后内容隐约可见；
侧边栏、顶栏、主内容区三个元素共享同一状态，使用相同的时长和缓动曲线同步过渡；
侧边栏支持折叠/展开，宽度从 240px 平滑过渡到 68px。

核心思路

侧边栏和顶栏都是 position: fixed 的浮动面板，不贴边（留 12px 间距），使用毛玻璃效果，宽度/位置通过状态联动动画。

侧边栏结构

<aside className={cn(
  "fixed left-3 top-3 bottom-3 z-40",  /* 距四边 12px */
  "rounded-[1.5rem]",                    /* 大圆角，药丸形 */
  "glass-strong",                        /* 毛玻璃 40px blur */
  "ring-1 ring-white/[0.12]",           /* 白色半透明边框 */
  "shadow-[var(--shadow-float)]",        /* 浮动级阴影 */
  "transition-all duration-500",
  "[transition-timing-function:var(--ease-out-expo)]",
  sidebarOpen ? "w-60" : "[w:4.25rem]"
)}
style={{ width: sidebarOpen ? "15rem" : "4.25rem" }}>

宽度联动机制

侧边栏宽度变化时，顶栏和主内容区同步偏移：

// 顶栏 left 值跟随侧边栏
<div className={cn(
  "fixed top-3 right-3 z-30",
  "transition-all duration-500",
  "[transition-timing-function:var(--ease-out-expo)]",
  sidebarOpen ? "left-[16.5rem]" : "left-[5.75rem]"
)} />

// 主内容区 padding-left 跟随
<main className={cn(
  "transition-all duration-500",
  "[transition-timing-function:var(--ease-out-expo)]",
  sidebarOpen ? "pl-[16.5rem]" : "pl-[5.75rem]"
)}>

三个元素共享同一个 sidebarOpen 状态（来自 Zustand store），使用完全相同的 duration-500 + ease-out-expo 过渡参数，确保动画同步。

侧边栏折叠/展开尺寸

状态宽度说明展开15rem (240px)显示图标 + 文字 + 描述折叠4.25rem (68px)仅显示图标，居中对齐

顶栏结构

<div className={cn(
  "fixed top-3 right-3 z-30",
  "rounded-2xl",
  "glass-strong",
  "ring-1 ring-white/[0.12]",
  "shadow-[var(--shadow-card)]"
)}>

活跃状态指示器

侧边栏导航项的活跃指示是一个左侧的发光竖条：

{isActive && (
  <div className="absolute left-0 top-1/2 -translate-y-1/2
                  h-5 w-[3px] rounded-full bg-primary
                  shadow-[0_0_8px_hsl(var(--primary)/0.3)]" />
)}

设计要点

不贴边：left-3 top-3 bottom-3（12px）让面板”浮”在内容之上
大圆角：rounded-[1.5rem] 制造药丸形轮廓
毛玻璃：glass-strong（40px blur + 1.6 saturate）让背后内容隐约可见
白色边框：ring-white/[0.12] 定义面板边缘
暖色深阴影：shadow-float 制造悬浮高度感
expo 缓动：宽大布局变化用 ease-out-expo（快速启动、悠长减速）

适用场景

Dashboard 类应用的侧边栏 + 顶栏
需要”悬浮感”的导航系统
可折叠/展开的面板布局

‍