侧边栏小图标

css/style.min.css

@@ -2510,14 +2510,11 @@ dd, dt {
     box-shadow: 0px 0px 5px rgba(0,0,0,0.08);
 }
 .lyear-layout-sidebar-close .lyear-layout-sidebar {
-    transform: translateX(-100%);
-    -webkit-box-shadow: none;
-	-moz-box-shadow: none;
-    box-shadow: none;
+    width: 60px;
 }
 .lyear-layout-sidebar-close .lyear-layout-header,
 .lyear-layout-sidebar-close .lyear-layout-content {
-    padding-left: 0px;
+    padding-left: 60px;
 }
 .lyear-layout-sidebar-scroll {
 	height: -moz-calc(100% - 68px);
@@ -2586,12 +2583,16 @@ dd, dt {
     padding-left: 52.99999px;
     color: inherit;
     font-weight: 500;
+    white-space: nowrap;
 }
 .nav-drawer > li > a {
     border-right: 3px solid transparent;
     padding-top: 14px;
     padding-bottom: 13px;
 }
+.nav-drawer > li > a > span {
+    white-space: nowrap;
+}
 .nav-drawer > .active > a {
     background-color: rgba(0,0,0,.0125);
     border-color: #33cabb;
@@ -2621,6 +2622,7 @@ dd, dt {
 }
 .nav-item-has-subnav > a:after {
     position: absolute;
+    top: 14px;
     right: 24px;
     font-family: 'Material Design Icons';
     font-size: 10px;
@@ -3246,6 +3248,13 @@ dd, dt {
         -webkit-transform: translateZ(0);
         transform: translateZ(0);
     }
+    .lyear-layout-sidebar-close .lyear-layout-sidebar {
+        width: 240px;
+    }
+    .lyear-layout-sidebar-close .lyear-layout-header,
+    .lyear-layout-sidebar-close .lyear-layout-content {
+        padding-left: 0px;
+    }
 }
 @media screen and (max-width: 767px) {
     .table-responsive {
@@ -3267,6 +3276,61 @@ dd, dt {
         display: none;
     }
 }
+@media (min-width: 1024px) {
+    .lyear-layout-sidebar-close .nav-drawer > li > a {
+        padding: 14px 28px 13px 29px;
+        height: 48px;
+    }
+    .lyear-layout-sidebar-close .nav-drawer > li > a span {
+        display: none;
+    }
+    .lyear-layout-sidebar-close .nav-drawer > li > a:after {
+        content: '';
+    }
+    .lyear-layout-sidebar-close .ps__rail-x,
+    .lyear-layout-sidebar-close .ps__rail-y {
+	    pointer-events: none;
+    }
+    .lyear-layout-sidebar-close .lyear-layout-sidebar:not(:hover) .ps {
+        overflow: visible!important;
+    }
+    .lyear-layout-sidebar-close .lyear-layout-sidebar:not(:hover) .nav-item-has-subnav > .nav-subnav {
+        display: none!important;
+    }
+    .lyear-layout-sidebar-close .sidebar-footer {
+        visibility: hidden;
+        opacity: 0;
+    }
+    .lyear-layout-sidebar {
+        -webkit-transition: all .3s ease-in-out;
+	    transition: all .3s ease-in-out;
+    }
+    .lyear-layout-sidebar-close .lyear-layout-sidebar:hover {
+        width: 240px;
+    }
+    .lyear-layout-sidebar-close .lyear-layout-sidebar:hover .nav-drawer > li > a {
+        padding-right: 24px;
+        padding-left: 52.99999px;
+        padding-top: 14px;
+        padding-bottom: 13px;
+    }
+    .lyear-layout-sidebar-close .lyear-layout-sidebar:hover .nav-drawer > li > a span {
+        display: block;
+    }
+    .lyear-layout-sidebar-close .lyear-layout-sidebar:hover .nav-drawer .nav-item-has-subnav > a:after {
+        content: '\f142';
+    }
+    .lyear-layout-sidebar-close .lyear-layout-sidebar:hover .sidebar-footer {
+        visibility: visible;
+        opacity: 1;
+        -webkit-transition: opacity 0.3s ease-in-out 0.15s;
+        transition: opacity 0.3s ease-in-out 0.15s;
+    }
+    body:not(.lyear-layout-sidebar-close) .sidebar-footer {
+        -webkit-transition: opacity 0.3s ease-in-out 0.15s;
+        transition: opacity 0.3s ease-in-out 0.15s;
+    }
+}
 
 /** ----------------------------------
  * 主题设置

index.html

@@ -28,9 +28,9 @@
         
         <nav class="sidebar-main">
           <ul class="nav nav-drawer">
-            <li class="nav-item active"> <a class="multitabs" href="lyear_main.html"><i class="mdi mdi-home"></i> 后台首页</a> </li>
+            <li class="nav-item active"> <a class="multitabs" href="lyear_main.html"><i class="mdi mdi-home"></i> <span>后台首页</span></a> </li>
             <li class="nav-item nav-item-has-subnav">
-              <a href="javascript:void(0)"><i class="mdi mdi-palette"></i> UI 元素</a>
+              <a href="javascript:void(0)"><i class="mdi mdi-palette"></i> <span>UI 元素</span></a>
               <ul class="nav nav-subnav">
                 <li> <a class="multitabs" href="lyear_ui_buttons.html">按钮</a> </li>
                 <li> <a class="multitabs" href="lyear_ui_cards.html">卡片</a> </li>
@@ -49,7 +49,7 @@
               </ul>
             </li>
             <li class="nav-item nav-item-has-subnav">
-              <a href="javascript:void(0)"><i class="mdi mdi-format-align-justify"></i> 表单</a>
+              <a href="javascript:void(0)"><i class="mdi mdi-format-align-justify"></i> <span>表单</span></a>
               <ul class="nav nav-subnav">
                 <li> <a class="multitabs" href="lyear_forms_elements.html">基本元素</a> </li>
                 <li> <a class="multitabs" href="lyear_forms_radio.html">单选框</a> </li>
@@ -58,7 +58,7 @@
               </ul>
             </li>
             <li class="nav-item nav-item-has-subnav">
-              <a href="javascript:void(0)"><i class="mdi mdi-file-outline"></i> 示例页面</a>
+              <a href="javascript:void(0)"><i class="mdi mdi-file-outline"></i> <span>示例页面</span></a>
               <ul class="nav nav-subnav">
                 <li> <a class="multitabs" href="lyear_pages_doc.html">文档列表</a> </li>
                 <li> <a class="multitabs" href="lyear_pages_gallery.html">图库列表</a> </li>
@@ -72,7 +72,7 @@
               </ul>
             </li>
             <li class="nav-item nav-item-has-subnav">
-              <a href="javascript:void(0)"><i class="mdi mdi-language-javascript"></i> JS 插件</a>
+              <a href="javascript:void(0)"><i class="mdi mdi-language-javascript"></i> <span>JS 插件</span></a>
               <ul class="nav nav-subnav">
                 <li> <a class="multitabs" href="lyear_js_datepicker.html">日期选取器</a> </li>
                 <li> <a class="multitabs" href="lyear_js_sliders.html">滑块</a> </li>
@@ -84,7 +84,7 @@
               </ul>
             </li>
             <li class="nav-item nav-item-has-subnav">
-              <a href="javascript:void(0)"><i class="mdi mdi-menu"></i> 多级菜单</a>
+              <a href="javascript:void(0)"><i class="mdi mdi-menu"></i> <span>多级菜单</span></a>
               <ul class="nav nav-subnav">
                 <li> <a href="#!">一级菜单</a> </li>
                 <li class="nav-item nav-item-has-subnav">