vue3 后台管理框架geeker admin -- 纵向布局：侧边栏 scss
0 环境
1 文档
2 前言
要想在线看源码的，请点开 LayoutVertical/index.vue代码分析查看具体源码，本地的源码位置：src/layouts/LayoutVertical/index.vue。scss也是一样，本地源码的位置：src/layouts/LayoutVertical/index.scss。
3 纵向布局侧边栏组成分析
先看源码，侧边栏被分为了两份。一份是svg+标题，另一份是可滚动的menu。
还有一种情况：侧边栏只显示图标，如何隐藏文字内容呢。
3 展开/收缩侧边栏按钮(了解即可)
我说的index.scss 对应着是前言里的LayoutVertical/index.scss，index.vue对应着的是：LayoutVertical/index.vue。
点击展开/收缩侧边栏按钮，它的图标会发生变化，宽度会发生变化，如下图：自行点击测试。
如下图：
先看index.vue，:style="{ width: isCollapse ? '65px' : '210px' }是由isCollapse的变量值的真或假来控制的，它的是从useGlobalStore里拿到的，并且默认值为false，也就是210px，展开状态。但是这个变量是通过header最左边的那个按钮控制的，只有等讲到header的时候，一起加进去的，现在只需要知道，这个按钮是个控制isCollapse变量的true或false就行。
4 页面布局
1 html代码分析
图标和标题是一行。然后menu占据剩余位置，并且可以滚动。如下两张图：
现在是没写scss下的样式，如下图：
2 css代码分析
index.scss核心代码(也可以在上面文档中找到)如下：
参考上面没有css下的样式，宽度没有占满空余内容。设置宽度为auto。设置背景和右边框，由于它俩的颜色是在app下自定义的，内容有点多，以后单独拿出来细说。只要知道是哪行代码实现的就行，如下图：
右边框我特意加粗了，应该知道在哪里了吧。这里的线就是纵向和经典侧边栏的布局上的区别。
1 .aside-box
Flex 容器的排列方向为列方向(不过这里不加的话，会出现滚动条，感觉上呢会有点小丑)，高度要设置100%，还有动画效果，宽度发生变化时会触发过渡效果。
2 .flx-center
.flx-center在 @/styles/common.scss下，代表着水平垂直居中。
3 .logo包含它以下的scss样式
box-sizing个人认为不加也没关系，因为也没涉及到边框啥的，不过为了保险还是加下的好。给它一个高度。logo的设置：需要给svg一个宽度，设置与标题的距离，并且svg完全等比显示。text标题的设置：设置字体的大小、字重、这里的颜色也是自定义的，后面具体解析，文字不换行。
4 .el-scrollbar
.el-scrollbar下的高度计算，得到除了 .logo外的剩余高度。.el-menu宽度占满(el-menu宽度不一定占满的，所有要加上)，隐藏滚动条(假如有超过隐藏)。
border-right: none; 是要加的，因为是要清除 .el-menu下默认的样式，如下图：
5 总结
侧边栏大致分两块，一般就是高度、宽度的设置，flex列方向排列，加border、去border，加动画等等。题外话(待处理的问题)：控制侧边栏收缩的按钮，还有就是自定义的颜色，怎么做到的。
转载自:https://juejin.cn/post/7368040921156403237