From c0e85a44dd9afb2b4a62e75a2b04712007728c26 Mon Sep 17 00:00:00 2001
From: Argo Zhang <Argo@163.com>
Date: Fri, 16 Aug 2019 02:08:47 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BE=A7=E8=BE=B9=E6=A0=8F=E6=94=B6?=
 =?UTF-8?q?=E7=BC=A9=E6=97=B6=E4=BF=9D=E7=95=99=E5=9B=BE=E6=A0=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Bootstrap.Admin/Views/Shared/Navigator.cshtml |   1 +
 .../Views/Shared/SubNavItem.cshtml            |   2 +-
 Bootstrap.Admin/wwwroot/css/lte.css           | 124 +++++++++++++-----
 Bootstrap.Admin/wwwroot/js/common-scripts.js  |  12 +-
 4 files changed, 105 insertions(+), 34 deletions(-)

diff --git a/Bootstrap.Admin/Views/Shared/Navigator.cshtml b/Bootstrap.Admin/Views/Shared/Navigator.cshtml
index 8c061f59..ce3f5230 100644
--- a/Bootstrap.Admin/Views/Shared/Navigator.cshtml
+++ b/Bootstrap.Admin/Views/Shared/Navigator.cshtml
@@ -2,6 +2,7 @@
 <aside>
     <div class="bg"></div>
     <div class="nav-brand justify-content-center">
+        <img src="~/favicon.png" />
         <span>@Model.Title</span>
     </div>
     <div class="nav-header flex-fill align-items-center">
diff --git a/Bootstrap.Admin/Views/Shared/SubNavItem.cshtml b/Bootstrap.Admin/Views/Shared/SubNavItem.cshtml
index 8378ffd6..d4a9f8c7 100644
--- a/Bootstrap.Admin/Views/Shared/SubNavItem.cshtml
+++ b/Bootstrap.Admin/Views/Shared/SubNavItem.cshtml
@@ -1,6 +1,6 @@
 @model Bootstrap.Security.BootstrapMenu
 <li class="nav-item @Model.Active">
-    <a href="@Url.Content(Model.Url)" class="nav-link @Model.Active" target="@Model.Target"><i class="@Model.Icon"></i>@Model.Name</a>
+    <a href="@Url.Content(Model.Url)" class="nav-link @Model.Active" target="@Model.Target"><i class="@Model.Icon"></i><span>@Model.Name</span></a>
     @if (Model.Menus.Any())
     {
         @await Html.PartialAsync("SubNavigation", Model.Menus)
diff --git a/Bootstrap.Admin/wwwroot/css/lte.css b/Bootstrap.Admin/wwwroot/css/lte.css
index 164b631d..1c1d607d 100644
--- a/Bootstrap.Admin/wwwroot/css/lte.css
+++ b/Bootstrap.Admin/wwwroot/css/lte.css
@@ -1,28 +1,20 @@
-.header {
-    transition: margin-left .3s ease-in-out;
+.header .nav {
+    margin-right: 15px;
+    justify-content: flex-end;
 }
 
-    .header .nav {
-        margin-right: 15px;
-        justify-content: flex-end;
-    }
-
-    .header nav, userinfo, .userinfo .dropdown-toggle:after {
-        display: none;
-    }
-
-    .header .sidebar-toggle-box {
-        cursor: pointer;
-    }
-
-        .header .sidebar-toggle-box span {
-            transition: all .3s ease-in-out;
-        }
-
-.sidebar-open .header {
-    margin-left: 0;
+.header nav, userinfo, .userinfo .dropdown-toggle:after {
+    display: none;
 }
 
+.header .sidebar-toggle-box {
+    cursor: pointer;
+}
+
+    .header .sidebar-toggle-box span {
+        transition: all .3s ease-in-out;
+    }
+
 .userinfo {
     margin: 0.25rem 0;
 }
@@ -98,10 +90,27 @@ aside {
         padding: 0 0.625rem;
     }
 
-    aside .nav-brand span, .header .sidebar-toggle-box {
-        color: #333;
-        font-size: 1.25rem;
-        font-weight: 700;
+        aside .nav-brand span, .header .sidebar-toggle-box {
+            color: #333;
+            font-size: 1.25rem;
+            font-weight: 700;
+            white-space: nowrap;
+        }
+
+        aside .nav-brand img {
+            opacity: 0;
+            visibility: hidden;
+            width: 2.75rem;
+            height: auto;
+            border-radius: 0.42rem;
+            position: absolute;
+            top: 9px;
+            left: 4px;
+        }
+
+    aside .nav-link span {
+        display: inline-block;
+        white-space: nowrap;
     }
 
 .main-content {
@@ -128,6 +137,7 @@ aside {
 @media (min-width: 769px) {
     .header {
         margin-left: 210px;
+        transition: margin-left .3s linear;
     }
 
         .header .sidebar-toggle-box span {
@@ -148,6 +158,11 @@ aside {
 
         aside .sidebar {
             top: 139px;
+            transition: top .3s linear;
+        }
+
+        aside, aside .nav-header img {
+            transition: width .3s linear;
         }
 
         aside .nav-brand, aside .nav-header {
@@ -158,15 +173,60 @@ aside {
             padding: 0.625rem 0.625rem 0.625rem 0.625rem;
             border-bottom: solid 1px rgba(221, 221, 221, 0.5);
         }
-    
-        aside .nav-header img {
-            width: 60px;
-            height: auto;
-            border-radius: 50%;
-            margin-right: 0.625rem;
-        }
+        
+            aside .nav-header img {
+                width: 3.75rem;
+                height: auto;
+                border-radius: 50%;
+            }
 
         aside .nav-header span {
             color: #eee;
+            margin-left: 0.625rem;
+        }
+
+        aside .sub .nav-link {
+            transition: padding-left .3s linear;
+        }
+
+        aside .nav-link span, aside .nav-brand span, aside .nav-header span, aside .nav-brand img {
+            transition: margin-left .3s linear, opacity .3s ease, visibility .3s ease;
+        }
+
+        .sidebar-open .header {
+            margin-left: 3.375rem;
+        }
+
+        .sidebar-open aside {
+            transform: translate(0);
+            width: 3.375rem;
+        }
+
+            .sidebar-open aside .nav-item span, .sidebar-open aside .nav-header span, .sidebar-open .nav-brand span {
+                opacity: 0;
+                visibility: hidden;
+                margin-left: -10px;
+            }
+
+        .sidebar-open aside .nav-header img {
+            width: 2.25rem
+        }
+
+        .sidebar-open aside .nav-brand img {
+            opacity: 1;
+            visibility: visible;
+        }
+
+        .sidebar-open aside .sidebar {
+            top: 115px;
+        }
+
+        .sidebar-open .main-content {
+            margin-left: 3.375rem;
+            transition: margin-left .3s linear;
+        }
+
+        .sidebar-open .sub .nav-link {
+            padding-left: 0;
         }
 }
diff --git a/Bootstrap.Admin/wwwroot/js/common-scripts.js b/Bootstrap.Admin/wwwroot/js/common-scripts.js
index f5f674ec..797825a2 100644
--- a/Bootstrap.Admin/wwwroot/js/common-scripts.js
+++ b/Bootstrap.Admin/wwwroot/js/common-scripts.js
@@ -176,7 +176,17 @@ $(function () {
         },
         addNiceScroll: function () {
             if (!$.browser.versions.ios && $(window).width() > 768) {
-                this.overlayScrollbars({ className: 'os-theme-light', scrollbars: { autoHide: 'leave' } });
+                this.overlayScrollbars({
+                    className: 'os-theme-light',
+                    scrollbars: {
+                        autoHide: 'leave',
+                        autoHideDelay: 100
+                    },
+                    overflowBehavior: {
+                        x: "hidden",
+                        y: "scroll"
+                    }
+                });
             }
             else {
                 this.css('overflow', 'auto');