重构页面：移除sidebar id元素，重写适配样式表

Bootstrap.Admin/Views/Shared/Navigator.cshtml

@@ -1,13 +1,11 @@
 @model NavigatorBarModel
 <aside>
-    <div id="sidebar" class="sidebar">
+    <!-- sidebar menu start-->
-        <!-- sidebar menu start-->
+    <ul class="sidebar nav nav-pills flex-column flex-nowrap">
-        <ul class="sidebar-menu">
+        @foreach (var menu in Model.Navigations)
-            @foreach (var menu in Model.Navigations)
+        {
-            {
+            @await Html.PartialAsync("SubNavItem", menu)
-                @await Html.PartialAsync("SubMenu", menu)
+        }
-            }
+    </ul>
-        </ul>
+    <!-- sidebar menu end-->
-        <!-- sidebar menu end-->
-    </div>
 </aside>

Bootstrap.Admin/Views/Shared/SubMenu.cshtml

@@ -1,8 +0,0 @@
-@model Bootstrap.Security.BootstrapMenu
-<li class="sub-menu">
-    <a href="@Url.Content(Model.Url)" class="@Model.Active" target="@Model.Target"><i class="@Model.Icon"></i>@Model.Name</a>
-    @if (Model.Menus.Count() > 0)
-    {
-        @await Html.PartialAsync("SubNavigation", Model.Menus)
-    }
-</li>

Bootstrap.Admin/Views/Shared/SubNavItem.cshtml

@@ -0,0 +1,8 @@
+@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>
+    @if (Model.Menus.Count() > 0)
+    {
+        @await Html.PartialAsync("SubNavigation", Model.Menus)
+    }
+</li>

Bootstrap.Admin/Views/Shared/SubNavigation.cshtml

@@ -1,7 +1,7 @@
 @model IEnumerable<Bootstrap.Security.BootstrapMenu>
-<ul class="sub" style="display: none;">
+<ul class="sub nav nav-pills flex-column flex-nowrap" style="display: none;">
     @foreach (var menu in Model)
     {
-        @await Html.PartialAsync("SubMenu", menu)
+        @await Html.PartialAsync("SubNavItem", menu)
     }
 </ul>

Bootstrap.Admin/Views/Shared/_Admin.cshtml

@@ -17,12 +17,10 @@
 @section javascript {
     <environment include="Development">
         <script src="~/js/sweetalert.js" asp-append-version="true"></script>
-        <script src="~/js/jquery.scrollTo.js" asp-append-version="true"></script>
         <script src="~/js/jquery.nicescroll.js" asp-append-version="true"></script>
     </environment>
     <environment exclude="Development">
         <script src="~/js/sweetalert.min.js" asp-append-version="true"></script>
-        <script src="~/js/jquery.scrollTo.min.js" asp-append-version="true"></script>
         <script src="~/js/jquery.nicescroll.min.js" asp-append-version="true"></script>
     </environment>
     <script src="~/js/jquery.dcjqaccordion.2.7.js" asp-append-version="true"></script>

Bootstrap.Admin/wwwroot/css/admin-responsive.css

@@ -16,24 +16,17 @@
 }
 
 @media (min-width: 769px) {
+    body {
+        overflow: hidden;
+    }
+
+    .sidebar-open .main-content {
+        margin-left: 0;
+        display: block;
+    }
+
     .main-content {
         margin-left: 210px;
         transition: none;
     }
-
-        .main-content.open {
-            display: block;
-        }
-}
-
-@media (min-height: 672px) {
-    .main-content {
-        position: fixed;
-        overflow: auto;
-        transition: none;
-    }
-
-        .main-content.open {
-            display: block;
-        }
 }

Bootstrap.Admin/wwwroot/css/admin.css

@@ -13,25 +13,19 @@
     font-weight: 600;
 }
 
+.sidebar-open .main-content {
+    display: none;
+}
+
 .main-content {
-    transition: all .4s ease-in-out;
     padding: 15px 15px 0 15px;
     margin-left: 0;
-    height: auto;
     left: 0;
     bottom: 40px;
     right: 0;
     top: 98px;
 }
 
-    .main-content.open {
-        display: none;
-    }
-
-    .main-content.closed {
-        margin-left: 0;
-    }
-
     .main-content > .panel:last-child .panel-body {
         padding-bottom: 0;
     }

Bootstrap.Admin/wwwroot/css/site-responsive.css

@@ -22,73 +22,37 @@
 }
 
 @media (min-width: 768px) {
-    html, body {
-        height: 100%;
-        overflow: hidden;
-    }
-
     .sidebar-toggle-box {
         flex: 0 1 auto;
     }
 
-    .sidebar {
+    .sidebar-open aside {
-        top: 98px;
+        transform: translate(0);
-        bottom: 40px;
-        position: absolute;
-        overflow: auto;
-        height: auto;
     }
 
-    .header {
+    .header .nav {
-        border-bottom: none;
+        flex: 1 1 auto;
     }
 
-        .header .nav {
-            flex: 1 1 auto;
-        }
-
     .header, .site-footer {
         position: fixed;
     }
 }
 
 @media (min-width: 769px) {
-    .sidebar {
+    .sidebar-open aside {
-        display: block;
+        transform: translate(-100%);
-        width: 210px;
+    }
+
+    .sidebar-open .site-footer {
+        display: flex;
     }
 
     aside {
         transition: none;
-        transform: none;
-        top: 0;
-        right: auto;
-    }
-}
-
-@media (min-height: 672px) {
-    html, body {
-        height: 100%;
-        overflow: hidden;
-    }
-
-    .header, .site-footer {
-        position: fixed;
-    }
-
-    .sidebar {
-        top: 98px;
-        bottom: 40px;
-        position: absolute;
-        overflow: auto;
-        height: auto;
-    }
-
-    aside {
-        top: 0;
-    }
-
-    .aside.open {
         transform: translate(0);
+        width: 210px;
+        overflow: auto;
+        bottom: 40px;
     }
 }

Bootstrap.Admin/wwwroot/css/site.css

@@ -10,6 +10,14 @@ body {
     -webkit-overflow-scrolling: touch;
 }
 
+.sidebar-open aside {
+    transform: translate(0);
+}
+
+.sidebar-open .site-footer {
+    display: none;
+}
+
 aside {
     transition: transform .4s ease-in-out;
     transform: translate(-100%);
@@ -18,94 +26,69 @@ aside {
     bottom: 0;
     left: 0;
     right: 0;
-    height: auto;
+    z-index: 4;
-    z-index: 5;
-}
-
-    aside.open {
-        transform: translate(0);
-    }
-
-.sidebar {
-    display: none;
-    overflow: auto;
-    width: 100%;
-    z-index: 5;
-    height: 100%;
     background: #2a3542;
 }
 
-.sidebar-menu {
+.sidebar {
     padding: 20px 0;
-    margin-bottom: 0;
+    background: inherit;
 }
 
-    .sidebar-menu .dcjq-icon {
+    .sidebar .nav-item {
-        height: 17px;
-        width: 17px;
-        display: inline-block;
-        background: url(../images/nav-expand.png) no-repeat;
-        float: right;
-        margin-top: 3px;
-    }
-
-    .sidebar-menu .active .dcjq-icon {
-        background-position: bottom;
-    }
-
-    .sidebar-menu li {
         margin: 5px 10px;
     }
 
-        .sidebar-menu li a {
+        .sidebar .nav-item .nav-link:hover, .sidebar .nav-item .nav-link:focus {
-            color: #aeb2b7;
+            background: #35404d;
-            display: block;
+            color: #fff;
-            padding: 15px 10px;
-            transition: all 0.3s ease;
-            border-radius: 4px;
         }
 
-            .sidebar-menu li a:hover, .sidebar-menu li a:focus {
+        .sidebar .nav-item.active > .nav-link {
-                background: #35404d;
+            color: #FF6C60;
-                color: #fff;
-            }
-
-            .sidebar-menu li a.active {
-                color: #FF6C60;
-            }
-
-            .sidebar-menu li a i {
-                width: 22px;
-            }
-
-        .sidebar-menu li .sub {
-            padding-left: 0;
         }
 
-            .sidebar-menu li .sub li a:hover, .sidebar-menu li .sub li.active a {
+    .sidebar .nav-link {
-                color: #FF6C60;
+        color: #aeb2b7;
-                transition: all 0.3s ease;
+        padding: 15px 10px;
-                display: block;
+        transition: all .3s linear;
+        display: flex;
+        align-items: center;
+    }
+
+        .sidebar .nav-link .dcjq-icon {
+            height: 17px;
+            width: 17px;
+            background: url(../images/nav-expand.png) no-repeat;
+            margin-left: auto;
+        }
+
+        .sidebar .nav-link i {
+            width: 22px;
+        }
+
+        .sidebar .nav-link.active, .sidebar .nav-link.active + .sub,
+        .sidebar .sub .sub .nav-item .nav-link:hover, .sidebar .sub .sub .nav-item .nav-link:focus {
+            background: #35404D;
+        }
+
+            .sidebar .nav-link.active .dcjq-icon {
+                background-position: bottom;
             }
 
-            .sidebar-menu li .sub li {
+    .sidebar .sub .nav-item.dcjq-parent-li {
-                background: #35404D;
+        margin-left: 0;
-                margin: 0;
+        margin-right: 0;
-                padding: 0 10px 0 32px;
+    }
-            }
 
-                .sidebar-menu li .sub li:last-child {
+        .sidebar .sub .nav-item.dcjq-parent-li .nav-link {
-                    border-radius: 0 0 4px 4px;
+            padding-left: 20px;
-                    padding-bottom: 10px;
+        }
-                }
 
-                .sidebar-menu li .sub li a {
+    .sidebar .sub .dcjq-parent-li .nav-link.active, .sidebar .sub .dcjq-parent-li .nav-link.active + .sub,
-                    padding: 12px 0;
+    .sidebar .sub .nav-item .nav-link:hover, .sidebar .sub .nav-item .nav-link:focus {
-                }
+        background: #3a4756;
-
+    }
-ul li {
-    list-style: none;
-}
 
 .modal-body .dd {
     margin-bottom: 15px;
@@ -316,7 +299,7 @@ a, a:hover, a:focus {
     left: 0;
     bottom: 0;
     right: 0;
-    z-index: 1;
+    z-index: 100;
     display: flex;
 }
 

Bootstrap.Admin/wwwroot/js/common-scripts.js

@@ -133,18 +133,12 @@ $(function () {
         "hideMethod": "fadeOut"
     };
 
-    var $sidebar = $("#sidebar");
+    var $sideMenu = $(".sidebar");
-    var $sideMenu = $sidebar.find('.sidebar-menu');
-    var $main = $('#main-content');
-    var $breadNav = $('#breadNav');
 
     $sideMenu.dcAccordion({
         autoExpand: true
     });
 
-    // custom scrollbar
-    if (!$.browser.versions.ios) $("#sidebar").niceScroll({ cursorcolor: "#e8403f", cursorwidth: '3px', background: '#2a3542', spacebarenabled: false, cursorborder: '' });
-
     $("#gotoTop").on('click', function (e) {
         e.preventDefault();
         $('#main-content, .content-body, body').animate({
@@ -153,38 +147,52 @@ $(function () {
     });
 
     // breadcrumb
+    var $breadNav = $('#breadNav');
     var arch = $sideMenu.find('a.active').last();
     if (arch.text() !== "") $breadNav.removeClass('d-none').text(arch.text());
 
-    // sidebar scroll animate
+    $.fn.extend({
-    var top = (arch.offset() || { top: 0 }).top;
+        autoScrollSidebar: function (options) {
-    if (top > 0) {
+            var $this = this;
-        var middle = $('header').outerHeight() + $sidebar.outerHeight() / 2;
+            var option = $.extend({ target: null, offsetTop: 0 }, options);
-        if (top > middle) $sidebar.animate({ scrollTop: top + arch.outerHeight() / 2 - middle }, 500);
+            var navItem = option.target;
-    }
+            var top = navItem.offset().top + $this.scrollTop() - $('header').outerHeight() + option.offsetTop;
 
-    $sidebar.on('click', 'a.dcjq-parent', function () {
+            // sidebar scroll animate
-        var o = $(this).offset();
+            var middle = $this.outerHeight() / 2;
-        diff = 110 - o.top;
+            if (top > middle) $this.animate({ scrollTop: top - middle }, 500, function () {
-        if (diff > 0)
+                $this.resizeNiceScroll();
-            $sidebar.scrollTo("-=" + Math.abs(diff), 500);
+            });
-        else
+            return this;
-            $sidebar.scrollTo("+=" + Math.abs(diff), 500);
+        },
+        resizeNiceScroll: function () {
+            if (!$.browser.versions.ios) this.getNiceScroll().resize();
+            return this;
+        },
+        addNiceScroll: function () {
+            if (!$.browser.versions.ios) {
+                var nice = this.data('__nicescroll') || false;
+                if (!nice) this.niceScroll({ cursorcolor: "#e8403f", cursorwidth: '3px', background: '#2a3542', spacebarenabled: false, cursorborder: '' });
+            }
+            return this;
+        }
+    });
 
-        // resize nicscroll
+    // custom scrollbar
-        $sidebar.getNiceScroll().resize();
+    var $sidebar = $('aside').addNiceScroll();
+    $sidebar.autoScrollSidebar({ target: arch.parent(), offsetTop: arch.parent().innerHeight() / 2 });
+
+    $sideMenu.on('click', 'a.dcjq-parent', function () {
+        var $this = $(this);
+        if (!$this.hasClass('active')) {
+            setTimeout(function () { $sidebar.resizeNiceScroll(); }, 500);
+            return;
+        }
+        $sidebar.autoScrollSidebar({ target: $(this).parent(), offsetTop: 25.5 });
     });
 
     $('.sidebar-toggle-box').on('click', function () {
-        if ($sidebar.is(":visible")) {
+        $('body').toggleClass('sidebar-open');
-            $main.addClass('closed').removeClass('open');
-            $sidebar.parent().toggleClass('open');
-            $(window).width() <= 768 ? setTimeout(function () { $sidebar.hide(); }, 400) : $sidebar.hide();
-        } else {
-            $sidebar.show();
-            $sidebar.parent().toggleClass('open');
-            $(window).width() <= 768 ? setTimeout(function () { $main.addClass('open').removeClass('closed'); }, 400) : $main.addClass('open').removeClass('closed');
-        }
     });
 
     $('[data-toggle="dropdown"].dropdown-select').dropdown('select');
@@ -214,4 +222,13 @@ $(function () {
             if (result.length > 0) this.reloadWidget();
         }
     });
+
+    $(window).on('resize', function () {
+        if ($(window).width() > 768) {
+            $sidebar.addNiceScroll();
+        }
+        else {
+            $sidebar.removeAttr('style').getNiceScroll().remove();
+        }
+    });
 });

Bootstrap.Admin/wwwroot/js/jquery.scrollTo.js

@@ -1,210 +0,0 @@
-/*!
- * jQuery.scrollTo
- * Copyright (c) 2007-2015 Ariel Flesler - aflesler ○ gmail • com | http://flesler.blogspot.com
- * Licensed under MIT
- * http://flesler.blogspot.com/2007/10/jqueryscrollto.html
- * @projectDescription Lightweight, cross-browser and highly customizable animated scrolling with jQuery
- * @author Ariel Flesler
- * @version 2.1.2
- */
-; (function (factory) {
-    'use strict';
-    if (typeof define === 'function' && define.amd) {
-        // AMD
-        define(['jquery'], factory);
-    } else if (typeof module !== 'undefined' && module.exports) {
-        // CommonJS
-        module.exports = factory(require('jquery'));
-    } else {
-        // Global
-        factory(jQuery);
-    }
-})(function ($) {
-    'use strict';
-
-    var $scrollTo = $.scrollTo = function (target, duration, settings) {
-        return $(window).scrollTo(target, duration, settings);
-    };
-
-    $scrollTo.defaults = {
-        axis: 'xy',
-        duration: 0,
-        limit: true
-    };
-
-    function isWin(elem) {
-        return !elem.nodeName ||
-			$.inArray(elem.nodeName.toLowerCase(), ['iframe', '#document', 'html', 'body']) !== -1;
-    }
-
-    $.fn.scrollTo = function (target, duration, settings) {
-        if (typeof duration === 'object') {
-            settings = duration;
-            duration = 0;
-        }
-        if (typeof settings === 'function') {
-            settings = { onAfter: settings };
-        }
-        if (target === 'max') {
-            target = 9e9;
-        }
-
-        settings = $.extend({}, $scrollTo.defaults, settings);
-        // Speed is still recognized for backwards compatibility
-        duration = duration || settings.duration;
-        // Make sure the settings are given right
-        var queue = settings.queue && settings.axis.length > 1;
-        if (queue) {
-            // Let's keep the overall duration
-            duration /= 2;
-        }
-        settings.offset = both(settings.offset);
-        settings.over = both(settings.over);
-
-        return this.each(function () {
-            // Null target yields nothing, just like jQuery does
-            if (target === null) return;
-
-            var win = isWin(this),
-				elem = win ? this.contentWindow || window : this,
-				$elem = $(elem),
-				targ = target,
-				attr = {},
-				toff;
-
-            switch (typeof targ) {
-                // A number will pass the regex
-                case 'number':
-                case 'string':
-                    if (/^([+-]=?)?\d+(\.\d+)?(px|%)?$/.test(targ)) {
-                        targ = both(targ);
-                        // We are done
-                        break;
-                    }
-                    // Relative/Absolute selector
-                    targ = win ? $(targ) : $(targ, elem);
-                    /* falls through */
-                case 'object':
-                    if (targ.length === 0) return;
-                    // DOMElement / jQuery
-                    if (targ.is || targ.style) {
-                        // Get the real position of the target
-                        toff = (targ = $(targ)).offset();
-                    }
-            }
-
-            var offset = $.isFunction(settings.offset) && settings.offset(elem, targ) || settings.offset;
-
-            $.each(settings.axis.split(''), function (i, axis) {
-                var Pos = axis === 'x' ? 'Left' : 'Top',
-					pos = Pos.toLowerCase(),
-					key = 'scroll' + Pos,
-					prev = $elem[key](),
-					max = $scrollTo.max(elem, axis);
-
-                if (toff) {// jQuery / DOMElement
-                    attr[key] = toff[pos] + (win ? 0 : prev - $elem.offset()[pos]);
-
-                    // If it's a dom element, reduce the margin
-                    if (settings.margin) {
-                        attr[key] -= parseInt(targ.css('margin' + Pos), 10) || 0;
-                        attr[key] -= parseInt(targ.css('border' + Pos + 'Width'), 10) || 0;
-                    }
-
-                    attr[key] += offset[pos] || 0;
-
-                    if (settings.over[pos]) {
-                        // Scroll to a fraction of its width/height
-                        attr[key] += targ[axis === 'x' ? 'width' : 'height']() * settings.over[pos];
-                    }
-                } else {
-                    var val = targ[pos];
-                    // Handle percentage values
-                    attr[key] = val.slice && val.slice(-1) === '%' ?
-						parseFloat(val) / 100 * max
-						: val;
-                }
-
-                // Number or 'number'
-                if (settings.limit && /^\d+$/.test(attr[key])) {
-                    // Check the limits
-                    attr[key] = attr[key] <= 0 ? 0 : Math.min(attr[key], max);
-                }
-
-                // Don't waste time animating, if there's no need.
-                if (!i && settings.axis.length > 1) {
-                    if (prev === attr[key]) {
-                        // No animation needed
-                        attr = {};
-                    } else if (queue) {
-                        // Intermediate animation
-                        animate(settings.onAfterFirst);
-                        // Don't animate this axis again in the next iteration.
-                        attr = {};
-                    }
-                }
-            });
-
-            animate(settings.onAfter);
-
-            function animate(callback) {
-                var opts = $.extend({}, settings, {
-                    // The queue setting conflicts with animate()
-                    // Force it to always be true
-                    queue: true,
-                    duration: duration,
-                    complete: callback && function () {
-                        callback.call(elem, targ, settings);
-                    }
-                });
-                $elem.animate(attr, opts);
-            }
-        });
-    };
-
-    // Max scrolling position, works on quirks mode
-    // It only fails (not too badly) on IE, quirks mode.
-    $scrollTo.max = function (elem, axis) {
-        var Dim = axis === 'x' ? 'Width' : 'Height',
-			scroll = 'scroll' + Dim;
-
-        if (!isWin(elem))
-            return elem[scroll] - $(elem)[Dim.toLowerCase()]();
-
-        var size = 'client' + Dim,
-			doc = elem.ownerDocument || elem.document,
-			html = doc.documentElement,
-			body = doc.body;
-
-        return Math.max(html[scroll], body[scroll]) - Math.min(html[size], body[size]);
-    };
-
-    function both(val) {
-        return $.isFunction(val) || $.isPlainObject(val) ? val : { top: val, left: val };
-    }
-
-    // Add special hooks so that window scroll properties can be animated
-    $.Tween.propHooks.scrollLeft =
-	$.Tween.propHooks.scrollTop = {
-	    get: function (t) {
-	        return $(t.elem)[t.prop]();
-	    },
-	    set: function (t) {
-	        var curr = this.get(t);
-	        // If interrupt is true and user scrolled, stop animating
-	        if (t.options.interrupt && t._last && t._last !== curr) {
-	            return $(t.elem).stop();
-	        }
-	        var next = Math.round(t.now);
-	        // Don't waste CPU
-	        // Browsers don't render floating point scroll
-	        if (curr !== next) {
-	            $(t.elem)[t.prop](next);
-	            t._last = this.get(t);
-	        }
-	    }
-	};
-
-    // AMD requirement
-    return $scrollTo;
-});

Bootstrap.Admin/wwwroot/js/jquery.scrollTo.min.js

@@ -1,7 +0,0 @@
-/**
- * Copyright (c) 2007-2013 Ariel Flesler - aflesler<a>gmail<d>com | http://flesler.blogspot.com
- * Dual licensed under MIT and GPL.
- * @author Ariel Flesler
- * @version 1.4.6
- */
-;(function($){var h=$.scrollTo=function(a,b,c){$(window).scrollTo(a,b,c)};h.defaults={axis:'xy',duration:parseFloat($.fn.jquery)>=1.3?0:1,limit:true};h.window=function(a){return $(window)._scrollable()};$.fn._scrollable=function(){return this.map(function(){var a=this,isWin=!a.nodeName||$.inArray(a.nodeName.toLowerCase(),['iframe','#document','html','body'])!=-1;if(!isWin)return a;var b=(a.contentWindow||a).document||a.ownerDocument||a;return/webkit/i.test(navigator.userAgent)||b.compatMode=='BackCompat'?b.body:b.documentElement})};$.fn.scrollTo=function(e,f,g){if(typeof f=='object'){g=f;f=0}if(typeof g=='function')g={onAfter:g};if(e=='max')e=9e9;g=$.extend({},h.defaults,g);f=f||g.duration;g.queue=g.queue&&g.axis.length>1;if(g.queue)f/=2;g.offset=both(g.offset);g.over=both(g.over);return this._scrollable().each(function(){if(e==null)return;var d=this,$elem=$(d),targ=e,toff,attr={},win=$elem.is('html,body');switch(typeof targ){case'number':case'string':if(/^([+-]=?)?\d+(\.\d+)?(px|%)?$/.test(targ)){targ=both(targ);break}targ=$(targ,this);if(!targ.length)return;case'object':if(targ.is||targ.style)toff=(targ=$(targ)).offset()}$.each(g.axis.split(''),function(i,a){var b=a=='x'?'Left':'Top',pos=b.toLowerCase(),key='scroll'+b,old=d[key],max=h.max(d,a);if(toff){attr[key]=toff[pos]+(win?0:old-$elem.offset()[pos]);if(g.margin){attr[key]-=parseInt(targ.css('margin'+b))||0;attr[key]-=parseInt(targ.css('border'+b+'Width'))||0}attr[key]+=g.offset[pos]||0;if(g.over[pos])attr[key]+=targ[a=='x'?'width':'height']()*g.over[pos]}else{var c=targ[pos];attr[key]=c.slice&&c.slice(-1)=='%'?parseFloat(c)/100*max:c}if(g.limit&&/^\d+$/.test(attr[key]))attr[key]=attr[key]<=0?0:Math.min(attr[key],max);if(!i&&g.queue){if(old!=attr[key])animate(g.onAfterFirst);delete attr[key]}});animate(g.onAfter);function animate(a){$elem.animate(attr,f,g.easing,a&&function(){a.call(this,targ,g)})}}).end()};h.max=function(a,b){var c=b=='x'?'Width':'Height',scroll='scroll'+c;if(!$(a).is('html,body'))return a[scroll]-$(a)[c.toLowerCase()]();var d='client'+c,html=a.ownerDocument.documentElement,body=a.ownerDocument.body;return Math.max(html[scroll],body[scroll])-Math.min(html[d],body[d])};function both(a){return typeof a=='object'?a:{top:a,left:a}}})(jQuery);

Bootstrap.Client/Views/Shared/Navigator.cshtml

@@ -1,13 +1,11 @@
 @model NavigatorBarModel
 <aside>
-    <div id="sidebar" class="sidebar">
+    <!-- sidebar menu start-->
-        <!-- sidebar menu start-->
+    <ul class="sidebar">
-        <ul class="sidebar-menu">
+        @foreach (var menu in Model.Navigations)
-            @foreach (var menu in Model.Navigations)
+        {
-            {
+            @await Html.PartialAsync("SubMenu", menu)
-                @await Html.PartialAsync("SubMenu", menu)
+        }
-            }
+    </ul>
-        </ul>
+    <!-- sidebar menu end-->
-        <!-- sidebar menu end-->
-    </div>
 </aside>

Bootstrap.Client/Views/Shared/SubMenu.cshtml

@@ -1,5 +1,5 @@
 @model Bootstrap.Security.BootstrapMenu
-<li class="sub-menu">
+<li>
     <a href="@Url.Content(Model.Url)" class="@Model.Active" target="@Model.Target"><i class="@Model.Icon"></i>@Model.Name</a>
     @if (Model.Menus.Count() > 0)
     {

Bootstrap.Client/wwwroot/css/site-responsive.css

@@ -35,22 +35,11 @@
         flex: 1 1 auto;
     }
 
-    .site-footer {
+    .sidebar-open aside {
-        position: fixed;
+        transform: translate(-100%);
     }
 
-    aside {
+    .sidebar-open .site-footer {
-        display: none;
+        display: flex;
-    }
-}
-
-@media (min-height: 672px) {
-    html, body {
-        height: 100%;
-        overflow: hidden;
-    }
-
-    .site-footer {
-        position: fixed;
     }
 }

Bootstrap.Client/wwwroot/css/site.css

@@ -10,6 +10,14 @@ body {
     -webkit-overflow-scrolling: touch;
 }
 
+.sidebar-open aside {
+    transform: translate(0);
+}
+
+.sidebar-open .site-footer {
+    display: none;
+}
+
 aside {
     transition: transform .4s ease-in-out;
     transform: translate(-100%);
@@ -18,31 +26,25 @@ aside {
     bottom: 0;
     left: 0;
     right: 0;
-    height: auto;
+    z-index: 4;
-    z-index: 5;
+    background: #2a3542;
 }
 
-    aside.open {
-        transform: translate(0);
-    }
-
 .sidebar {
-    overflow: auto;
-    width: 100%;
-    z-index: 5;
-    height: 100%;
-    background: #2a3542;
-    background-image: url('../images/bird.png');
-    background-repeat: no-repeat;
-    background-position: 96% 98%;
-}
-
-.sidebar-menu {
     padding: 20px 0;
     margin-bottom: 0;
+    background: inherit;
 }
 
-    .sidebar-menu .dcjq-icon {
+    .sidebar .dcjq-parent-li, .sidebar li a.active, .sidebar li a.active + .sub {
+        background: #35404D;
+    }
+
+    .sidebar .sub .dcjq-parent-li, .sidebar .sub li a.active, .sidebar .sub li a.active + .sub {
+        background: #3a4756;
+    }
+
+    .sidebar .dcjq-icon {
         height: 17px;
         width: 17px;
         display: inline-block;
@@ -51,15 +53,15 @@ aside {
         margin-top: 3px;
     }
 
-    .sidebar-menu .active .dcjq-icon {
+    .sidebar .active .dcjq-icon {
         background-position: bottom;
     }
 
-    .sidebar-menu li {
+    .sidebar li {
         margin: 5px 10px;
     }
 
-        .sidebar-menu li a {
+        .sidebar li a {
             color: #aeb2b7;
             display: block;
             padding: 15px 10px;
@@ -67,43 +69,46 @@ aside {
             border-radius: 4px;
         }
 
-            .sidebar-menu li a:hover, .sidebar-menu li a:focus {
+            .sidebar li a:hover, .sidebar li a:focus {
                 background: #35404d;
                 color: #fff;
             }
 
-            .sidebar-menu li a.active {
+            .sidebar li a.active {
                 color: #FF6C60;
             }
 
-            .sidebar-menu li a i {
+            .sidebar li a i {
                 width: 22px;
             }
 
-        .sidebar-menu li .sub {
+        .sidebar li .sub {
             padding-left: 0;
         }
 
-            .sidebar-menu li .sub li a:hover, .sidebar-menu li .sub li.active a {
+    .sidebar > li > .sub a:hover, .sidebar > li > .sub .active > a {
-                color: #FF6C60;
+        color: #FF6C60;
-                transition: all 0.3s ease;
+        transition: all 0.3s ease;
-                display: block;
+        display: block;
-            }
+    }
 
-            .sidebar-menu li .sub li {
+    .sidebar > li > .sub a:hover, .sidebar > li > .sub a:focus {
-                background: #35404D;
+        background: none;
-                margin: 0;
+    }
-                padding: 0 10px 0 32px;
-            }
 
-                .sidebar-menu li .sub li:last-child {
+    .sidebar li .sub li {
-                    border-radius: 0 0 4px 4px;
+        margin: 0;
-                    padding-bottom: 10px;
+        padding: 0 10px 0 32px;
-                }
+    }
 
-                .sidebar-menu li .sub li a {
+        .sidebar li .sub li:last-child {
-                    padding: 12px 0;
+            border-radius: 0 0 4px 4px;
-                }
+            padding-bottom: 10px;
+        }
+
+        .sidebar li .sub li a {
+            padding: 12px 0;
+        }
 
 ul li {
     list-style: none;

Bootstrap.Client/wwwroot/js/common-scripts.js

@@ -15,8 +15,8 @@
         "hideMethod": "fadeOut"
     };
 
-    var $sidebar = $("#sidebar");
+    var $sidebar = $('aside');
-    var $sideMenu = $sidebar.find('.sidebar-menu');
+    var $sideMenu = $(".sidebar");
     var $breadNav = $('#breadNav');
 
     $sideMenu.dcAccordion({
@@ -44,7 +44,7 @@
         if (top > middle) $sidebar.animate({ scrollTop: top + arch.outerHeight() / 2 - middle }, 500);
     }
 
-    $sidebar.on('click', 'a.dcjq-parent', function () {
+    $sideMenu.on('click', 'a.dcjq-parent', function () {
         var o = $(this).offset();
         diff = 110 - o.top;
         if (diff > 0)
@@ -56,9 +56,8 @@
         $sidebar.getNiceScroll().resize();
     });
 
-    $('.sidebar-toggle-box').on('click', function (e) {
+    $('.sidebar-toggle-box').on('click', function () {
-        e.preventDefault();
+        $('body').toggleClass('sidebar-open');
-        if ($(window).width() < 768) $sidebar.parent().toggleClass('open');
     });
 
     $('[data-toggle="dropdown"].dropdown-select').dropdown('select');