选中 Navbar Content Searching ... shift + command + H ，暂时先把它隐藏起来 .. 点一下 Navbar 上的 menu 图标，我希望可以在页面的左边出现一个导航栏。

control + L 显示布局 ... 按一下 R，在面板上画一个矩形，让它占用三个网格的宽度 ... 高度可以跟页面的高度一样 ...

去掉边框 ... 填充的颜色选择 白色 ..

把它放在页面的最左边儿 .. 把它移到 Navbar 群组的外面 ... 图层的名字设置成 Container ..

在 Assets 里面，复制一下 close 这个小图标 .. 粘贴过来 .. 把它放在顶部左边这个位置上 ..

选中这两个图层 .. command + G .. 群组的名字是 Sidebar ... 再选中这个 close 图标 .. Resizing 设置成 pin to corner ..

放大一下画布的显示比例 .. 再画一个矩形 .. 让它跟 Sidebar 的 Container 一样宽 .. 去掉边框 .. 高度设置成 56 ..

调整一下它的位置 .. 再把它放到 Sidebar 这人群组的里面 .. 名字设置成 Container ..

按一下 T ，插入一个文字 ... Size 选择 20 .. Weight 是 light .. 颜色是黑色 ... 不透明度设置成 70 .. 调整一下它的位置 .. 文字的右边留出大概有 16 像素的边距 ..

选中文字，按住 option ，鼠标悬停到其它元素上，可以显示这个标尺 ..

这个文字图层的名字设置成 Sidebar / Item / Text ..

选中下面的这个 Container ，把它放到一个群组里 .. 名字是 Sidebar / Item:normal ... 同时再选中上面的文字图层，把它们放到一个群组里 ... 名字是 Sidebar / Item ..

然后选中这个群组里的文字 ... Resizing 设置成 Pin to corner

再选中 item:normal 里的 Container ，去掉它的填充 .. 现在这是边栏上的导航项目的正常的样式 ..

选中这个 normal ，command + D 复制一份 .. 名字设置成 Sidebar Item:hover .. 表示鼠标悬停在这个项目上的状态 ..

设置一下 Container 的样式 .. 选择一个填充颜色 ... fbfbfb，把这个颜色添加到文档颜色里，以后我们可能还会用到它 .

再给它添加一个 Inner Shadows .. 内部的阴影 .. x 是 0，y 是 -1 .. Blur 是 0 ..

阴影的颜色是黑色，不透明度设置成 6 ..

选中这个群组，再复制一份，再去设计一下项目的激活状态 .. 名字是 Item:active .. 选中里面的 Container .. 去掉内阴影 .. 填充颜色 设置成f8f8f8 ..

这个就是边栏导航项目的激活状态 .. 这个边栏上的导航项目有三种状态，正常 .. 悬停 .. 还有 激活 ...

最后，我们可以再去预览一下这个边栏的设计 ...