本文仅用户个人学习记录使用，意在提高自己的交互设计，仅此而已，欢迎指正.

右侧 侧边栏（right sidebar/navigation）的作用：

right sidebar/navigation 是一个位于网页主体内容旁边的垂直区域，通常包含导航链接，目录、标签或其他相关信息，它可以用于提供页面的导航、筛选、过滤或其他辅助功能。通常在整个页面中保持可见，使用户可以随时访问其中的内容或进行导航，帮助用户快速定位到感兴趣的内容部分，提供更好的浏览和导航体验。

参考设计截图

这是一个常见的布局设计。顶部是页面 header，header 左部分用来介绍 产品的 logo 和当前的页面title，header 右部分是系统常用的菜单项；header 下边是sidebar 和 页面主要的 content。

设计优点

• 将页面的 搜索功能放到了菜单项的顶部，这是一个常见的设计，可以让用户快速定位到这个功能点
  • 搜索框被点击会弹出一个搜索弹框，当根据关键字进行搜索时会在弹框中以 list 的形式来渲染结果列表
  • hover 每个结果项的时候会有 hover 效果（紫色背景，通常是和系统 theme 相搭配的交互）
  • 因为搜索的内容可能比较多，所以 弹框中有一个 【查看全部 totoal 个结果】,点击将会跳转到搜索的结果页面以此来显示更多的结果内容
  • 快捷键提示可以是一个比较人性化的提示，让用户可以不用移动鼠标，仅需按住某个功能键就可以直接进行想要的操作！
• 页面右侧的滚动条导航栏（ Scrollspy Navigation），可以快速的定位到当前页面的各个 section 区域，一般放到页面的右侧，高亮显示当前可见部分的导航链接
  • 主内容区有页面级的面包屑，用来快速简洁呈现出当前所处的 location 位置