style: 侧边栏增加用户登录信息

Bootstrap.Admin/Views/Shared/Navigator.cshtml

@@ -1,5 +1,13 @@
 @model NavigatorBarModel
 <aside>
+    <div class="bg"></div>
+    <div class="nav-brand justify-content-center">
+        <span>@Model.Title</span>
+    </div>
+    <div class="nav-header flex-fill align-items-center">
+        <img src="@Url.Content(Model.Icon)" />
+        <span class="d-inline-block font-weight-bold flex-fill">@Model.DisplayName</span>
+    </div>
     <!-- sidebar menu start-->
     <ul class="sidebar nav nav-pills flex-column flex-nowrap">
         @foreach (var menu in Model.Navigations)

Bootstrap.Admin/wwwroot/css/lte.css

@@ -1,6 +1,30 @@
-.header .nav {
+.header {
-    margin-right: 15px;
+    transition: margin-left .3s ease-in-out;
-    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;
+}
+
+.userinfo {
+    margin: 0.25rem 0;
 }
 
 .userinfo .badge {
@@ -11,6 +35,14 @@
     border-radius: 50%;
 }
 
+.userinfo .dropdown-toggle, .userinfo .dropdown-toggle:hover, .userinfo.show .dropdown-toggle {
+    border: none;
+}
+
+.userinfo .shadow-default {
+    box-shadow: none;
+}
+
 .userinfo .dropdown-item {
     border-bottom: solid 1px #e9ecef;
     padding: 0.25rem 1.5rem;
@@ -22,7 +54,7 @@
 
     .userinfo .dropdown-item img {
         width: 60px;
-        height: 60px;
+        height: auto;
         margin-right: 1rem;
     }
 
@@ -30,6 +62,10 @@
         padding: 0.25rem 0.625rem;
     }
 
+        .userinfo .dropdown-item a:hover {
+            color: #333;
+        }
+
         .userinfo .dropdown-item a i {
             display: inline-block;
             margin-right: 10px;
@@ -44,112 +80,80 @@
             color: #777;
         }
 
-        .userinfo .dropdown-item:last-child a:hover {
+aside {
-            color: #333;
+    top: 58px;
+}
+
+    aside .bg {
+        background-color: #337ab7;
+        height: 3px;
+        margin: 0 -15px;
+    }
+
+    aside .nav-brand {
+        height: 55px;
+        align-items: center;
+        border-bottom: solid 1px #ddd;
+        background: #fff;
+        padding: 0 0.625rem;
+    }
+
+    aside .nav-brand span, .header .sidebar-toggle-box {
+        color: #333;
+        font-size: 1.25rem;
+        font-weight: 700;
+    }
+
+.main-content {
+    top: 58px;
+}
+
+@media (min-width: 769px) {
+    .header {
+        margin-left: 210px;
+    }
+
+        .header .sidebar-toggle-box span {
+            opacity: 0;
         }
 
-.sidebar-toggle-box .fa-bars {
-    color: #007bff;
-}
-
-.navbar-light .navbar-nav .show > .nav-link, .navbar-light .navbar-nav .active > .nav-link, .navbar-light .navbar-nav .nav-link.show, .navbar-light .navbar-nav .nav-link.active {
-    color: rgb(51, 122, 183);
-}
-
-.navbar-light .navbar-nav .nav-link {
-    padding: 3px 8px;
-    color: rgba(51, 122, 183, 0.9);
-    transition: color .3s linear;
-}
-
-    .navbar-light .navbar-nav .nav-link:hover, .nav-link .navbar-nav .active > .nav-link:hover {
-        color: #0056b3;
-    }
-
-.dropdown-item.active, .dropdown-item:active {
-    color: rgba(0, 0, 0, 0.9);
-}
-
-.dropdown-item:hover, .nav .dropdown-item:nth-of-type(odd):hover, .dropdown-item:active, .dropdown-item.active,
-.bootstrap-table .export .dropdown-menu li:hover {
-    background-color: #77afd5;
-}
-
-.userinfo .dropdown-item:hover {
-    background-color: #f8f9fa;
-}
-
-.breadcrumb, .pagination-detail {
-    color: #337ab7;
-}
-
-.card-header, .modal-header, .popover-header {
-    background-color: #5899c8;
-    border-color: #3581b8;
-    border-radius: 4px 4px 0 0;
-}
-
-.close {
-    text-shadow: none;
-}
-
-.header .navbar {
-    padding: 0.25rem 0 0 1rem;
-}
-
-.header .nav-item.active {
-    border-bottom: solid 1px #307eb6;
-}
-
-.card {
-    border-top-width: 1px;
-}
-
-    .card:hover {
-        border-top-color: #84bbe2;
-    }
-
-.card, .modal-footer, .form-control, .popover, .date .input-group-text,
-.input-group .btn:not(.btn-secondary):not(.btn-primary):not(.btn-warning):not(.btn-info):not(.btn-danger),
-.form-select-input:hover {
-    border-color: #84bbe2;
-}
-
-    .card .card-header, .modal-header {
-        background-image: linear-gradient(to bottom, #5893be 0%, #63a6d7 100%);
-    }
-
-        .card .card-header, a[data-toggle="collapse"], .modal-header, .modal-header .close, .popover-header,
-        .card .card-header a, .modal-header a,
-        .card .card-header a:hover,
-        .close:not(:disabled):not(.disabled):hover,
-        .close:not(:disabled):not(.disabled):focus {
-            color: #fff;
-        }
-
-            .card .card-header a {
-                color: #eee;
-            }
-
-.control-label {
-    color: #467fa7;
-}
-
-.breadcrumb > li + li:before, .breadcrumb, .pagination-detail, .form-select-append {
-    color: #337ab7;
-}
-
-.form-control[disabled], .form-control[readonly], .date .form-control, .date .input-group-text,
-.input-group .btn:not(.btn-secondary):not(.btn-primary):not(.btn-warning):not(.btn-info):not(.btn-danger) {
-    background-color: rgba(84, 189, 220, 0.21);
-}
-
-.bs-popover-right .arrow::before, .bs-popover-auto[x-placement^="right"] .arrow::before {
-    border-right-color: #305873;
-}
-
-@media (min-width: 768px) {
     .breadcrumb {
         border-color: rgba(81, 152, 203, 0.8)
     }
+
+    .sidebar-open .header .sidebar-toggle-box span {
+        opacity: 1;
+    }
+
+    aside {
+        top: 0;
+    }
+
+        aside .bg {
+            display: block;
+        }
+
+        aside .sidebar {
+            padding-top: 0;
+        }
+
+        aside .nav-brand, aside .nav-header {
+            display: flex;
+        }
+
+        aside .nav-header {
+            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 span {
+            color: #eee;
+        }
 }

Bootstrap.Admin/wwwroot/css/theme.css

@@ -11,12 +11,15 @@ body {
     -webkit-overflow-scrolling: touch;
 }
 
+aside .bg, aside .nav-brand, aside .nav-header, .header .nav, .userinfo .dropdown-item:first-child {
+    display: none;
+}
+
 .header {
     background: #fff;
 }
 
     .header .nav {
-        display: none;
         margin-left: 15px;
     }
 
@@ -101,10 +104,6 @@ body {
     background-color: #fff;
 }
 
-    .userinfo .dropdown-item:first-child {
-        display: none;
-    }
-
     .userinfo .dropdown-item a {
         text-align: center;
         color: #777;