liyanhong
/
jinjianback1.1
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix[Sidebar]: fixed collapse animation problem

This commit is contained in:
Pan 2019-03-12 11:11:38 +08:00
parent 1a6ae849df
commit 4bbdf5ee0e
3 changed files with 18 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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;

3
src/styles/variables.scss
View File

@ -9,9 +9,10 @@ $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
:export { :export {
menuText: $menuText; menuText: $menuText;
menuActiveText: $menuActiveText; menuActiveText: $menuActiveText;

2
src/views/layout/components/Sidebar/index.vue
View File

@ -1,12 +1,12 @@
<template> <template>
<el-scrollbar wrap-class="scrollbar-wrapper"> <el-scrollbar wrap-class="scrollbar-wrapper">
<el-menu <el-menu
:show-timeout="200"
:default-active="$route.path" :default-active="$route.path"
:collapse="isCollapse" :collapse="isCollapse"
: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 routes" :key="route.path" :item="route" :base-path="route.path"/> <sidebar-item v-for="route in routes" :key="route.path" :item="route" :base-path="route.path"/>