zhouchijian
/
fe-drone-ci
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix[Sidebar]: fixed collapse animation problem (#1690)

This commit is contained in:
花裤衩 2019-03-12 11:12:28 +08:00 committed by Pan
parent 6b74a4ec72
commit 60b4549bf5
3 changed files with 17 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/layout/components/Sidebar/index.vue
View File

@ -6,6 +6,7 @@
:background-color="variables.menuBg" :background-color="variables.menuBg"
:text-color="variables.menuText" :text-color="variables.menuText"
:active-text-color="variables.menuActiveText" :active-text-color="variables.menuActiveText"
:collapse-transition="false"
mode="vertical" mode="vertical"
> >
<sidebar-item v-for="route in permission_routers" :key="route.path" :item="route" :base-path="route.path" /> <sidebar-item v-for="route in permission_routers" :key="route.path" :item="route" :base-path="route.path" />

20
src/styles/sidebar.scss
View File

@ -83,19 +83,26 @@
.hideSidebar { .hideSidebar {
.sidebar-container { .sidebar-container {
width: 36px !important; width: 54px !important;
} }
.main-container { .main-container {
margin-left: 36px; margin-left: 54px;
}
.svg-icon {
margin-right: 0px;
} }
.submenu-title-noDropdown { .submenu-title-noDropdown {
padding-left: 10px !important; padding: 0 !important;
position: relative; position: relative;
.el-tooltip { .el-tooltip {
padding: 0 10px !important; padding: 0 !important;
.svg-icon {
margin-left: 20px;
}
} }
} }
@ -103,7 +110,10 @@
overflow: hidden; overflow: hidden;
&>.el-submenu__title { &>.el-submenu__title {
padding-left: 10px !important; padding: 0 !important;
.svg-icon {
margin-left: 20px;
}
.el-submenu__icon-arrow { .el-submenu__icon-arrow {
display: none; display: none;

2
src/styles/variables.scss
View File

@ -19,7 +19,7 @@ $menuHover:#263445;
$subMenuBg:#1f2d3d; $subMenuBg:#1f2d3d;
$subMenuHover:#001528; $subMenuHover:#001528;
$sideBarWidth: 180px; $sideBarWidth: 210px;
// the :export directive is the magic sauce for webpack // the :export directive is the magic sauce for webpack
// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass // https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass