feat: 侧边栏收缩时保留图标

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">

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)

Bootstrap.Admin/wwwroot/css/lte.css

@@ -1,28 +1,20 @@
-.header {
+.header .nav {
-    transition: margin-left .3s ease-in-out;
+    margin-right: 15px;
+    justify-content: flex-end;
 }
 
-    .header .nav {
+.header nav, userinfo, .userinfo .dropdown-toggle:after {
-        margin-right: 15px;
+    display: none;
-        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 .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 {
+        aside .nav-brand span, .header .sidebar-toggle-box {
-        color: #333;
+            color: #333;
-        font-size: 1.25rem;
+            font-size: 1.25rem;
-        font-weight: 700;
+            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 {
+            aside .nav-header img {
-            width: 60px;
+                width: 3.75rem;
-            height: auto;
+                height: auto;
-            border-radius: 50%;
+                border-radius: 50%;
-            margin-right: 0.625rem;
+            }
-        }
 
         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;
         }
 }

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');