Sidebar 侧边栏

这条栏自己的状态，给所有需要跟着它变的东西用。

栏旁边的页面要靠它预留正确的宽度；栏里面的控件要知道自己的文字还画不画得出来。

这一个在 provider 之外会抛错，而上面那些部件不会——区别在于是谁犯的错。一个被单独渲染出来的部件，是有人写了个 <Sidebar> 想看看长什么样；而调用这个 hook 是代码在索要一份没有任何东西在保管的状态，在那里返回一个看似合理的默认值，等于给出一个在一种状态下错、在另一种状态下对、又没有任何东西说明是哪一种的布局。

持有这条导航栏是开还是关，并绑定切换它的快捷键。

和 Sidebar 本体分开，是因为这个答案在布局的两边都要用：栏自己靠它来画，栏旁边的内容靠它来预留宽度。一个住在栏里面的状态，只能往下读。

栏顶部那一块：品牌、工作区、切换器。

它也是 SidebarTrigger 该待的地方，而这个布局就是这么假定的：传进来的 children 占住空间，开关按钮贴在这一行的行尾。

会滚动的中段。所有「一串去处」都放这里。

底部那一块：各种工具入口、账号，一条栏收尾用的东西。

和上面的内容分成两块，是因为它们本来就是两种东西——一个在扫索引的读者，不想让「回收站」和「帮助」混在里面。

各块之间的一条线，缩进对齐到栏自己的内边距。

开合这条栏的那个控件。

它的无障碍名称跟着它将要做的事变，而 aria-expanded 报告的是此刻的事实——一个永远叫「切换侧边栏」的按钮，没有告诉读屏用户它接下来会往哪边走。

一块带标题的行，可以折叠。

标题和它下面那些行是同一个字号，靠字重和墨色压住它们。这两件事都是改出来的。更小的时候，它把标题本该表达的层级倒了过来——一个组读起来像一列表格上方的脚注，而不是它自己内容上方的标题。而它接下来跑去用了等宽字，十个这样的标题堆成一列，读起来就是一段终端输出：等宽是这套系统留给代码、元数据和数字的声音，而一个导航标题这三样都不是。层级归字重和墨阶上抬一级去表达——这是两个能压住一行、又不改变它是什么东西的信号。

展开的组会沿着它的行画一条细线。七个标题下面五十行，里面没有任何东西说明某一行属于哪个标题——只有到上一个标题的距离，而列表一滚，这个距离就没了。

栏收成图标时整块都会隐藏：一个装不下自己那个词的标题，就是两三个字母加一个数字，而那些行以图标的形式还在下面。

一行，打开之后是更多行。

这是一条栏真正的用处，也是一串平铺的分组做不到的事：一个装着若干项目的工作区、一个装着若干文档的文件夹、一个带着若干环境的服务。SidebarGroup 是一组东西上方的标题——它本身不是一个去处，所以它没有图标，也没有状态。这一个是一个装着去处的去处，所以它就是一行，并且和它的子项一样带图标、带行尾插槽、带 hover。

子项待在分组用的同一条细线后面，再往里缩进一级，所以嵌套读起来是深度，而不是两串互不相干的列表。这个宽度下缩进只放得下两级；第三级就是一棵树，而一棵树塞进 16rem 的一列，等于一个带着大纲的横向滚动条。

收成图标时，这一行变成它的图标，子项不再画出来——缩进已经没有地方可去，而一个没缩进的图标下面挂一个缩进的图标，是两个看不出关系的图形。

一行。

就是 NavItem，外加栏多出来的两样东西：一个行尾插槽，以及一个「没有地方放文字」时的答案。收成图标时，文字是被移出布局的，不是用 CSS 藏起来——一个 sr-only 的标签照样会占掉 flex 行的间距——它转而进了 tooltip，因为一个光秃秃的图标对谁都是猜，对读屏用户则是压根没法用。

没有 icon 的行，收起时仍然保留文字，因为把它藏了只会留下一行空白：图标才是让收起状态可读的东西，而一条会收起的栏，每一行都需要一个。