Fix for sidebar mini and fixed layout

dist/js/app.js

@@ -47,6 +47,10 @@ $.AdminLTE.options = {
   sidebarPushMenu: true,
   //Activate sidebar slimscroll if the fixed layout is set (requires SlimScroll Plugin)
   sidebarSlimScroll: true,
+  //Enable sidebar expand on hover effect for sidebar mini
+  //This option is forced to true if both the fixed layout and sidebar mini
+  //are used together
+  sidebarExpandOnHover: false,
   //BoxRefresh Plugin
   enableBoxRefresh: true,
   //Bootstrap.js tooltip
@@ -160,7 +164,7 @@ $(function () {
 
   //Activate sidebar push menu
   if (o.sidebarPushMenu) {
-    $.AdminLTE.pushMenu(o.sidebarToggleSelector);
+    $.AdminLTE.pushMenu.activate(o.sidebarToggleSelector);
   }
 
   //Activate Bootstrap tooltip
@@ -277,36 +281,71 @@ function _init() {
    * @type Function
    * @usage: $.AdminLTE.pushMenu("[data-toggle='offcanvas']")
    */
-  $.AdminLTE.pushMenu = function (toggleBtn) {
+  $.AdminLTE.pushMenu = {
-    //Get the screen sizes
+    activate: function (toggleBtn) {
-    var screenSizes = this.options.screenSizes;
+      //Get the screen sizes
+      var screenSizes = $.AdminLTE.options.screenSizes;
 
-    //Enable sidebar toggle
+      //Enable sidebar toggle
-    $(toggleBtn).on('click', function (e) {
+      $(toggleBtn).on('click', function (e) {
-      e.preventDefault();
+        e.preventDefault();
 
-      //Enable sidebar push menu
+        //Enable sidebar push menu
-      if ($(window).width() > (screenSizes.sm - 1)) {
+        if ($(window).width() > (screenSizes.sm - 1)) {
-        $("body").toggleClass('sidebar-collapse');
+          $("body").toggleClass('sidebar-collapse');
-      }
-      //Handle sidebar push menu for small screens
-      else {
-        if ($("body").hasClass('sidebar-open')) {
-          $("body").removeClass('sidebar-open');
-          $("body").removeClass('sidebar-collapse')
-        } else {
-          $("body").addClass('sidebar-open');
         }
-      }
+        //Handle sidebar push menu for small screens
-    });
+        else {
+          if ($("body").hasClass('sidebar-open')) {
+            $("body").removeClass('sidebar-open');
+            $("body").removeClass('sidebar-collapse')
+          } else {
+            $("body").addClass('sidebar-open');
+          }
+        }
+      });
 
-    $(".content-wrapper").click(function () {
+      $(".content-wrapper").click(function () {
-      //Enable hide menu when clicking on the content-wrapper on small screens
+        //Enable hide menu when clicking on the content-wrapper on small screens
-      if ($(window).width() <= (screenSizes.sm - 1) && $("body").hasClass("sidebar-open")) {
+        if ($(window).width() <= (screenSizes.sm - 1) && $("body").hasClass("sidebar-open")) {
-        $("body").removeClass('sidebar-open');
+          $("body").removeClass('sidebar-open');
-      }
+        }
-    });
+      });
 
+      //Enable expand on hover for sidebar mini
+      if ($.AdminLTE.options.sidebarExpandOnHover
+              || ($('body').hasClass('fixed')
+                      && $('body').hasClass('sidebar-mini'))) {
+        this.expandOnHover();
+      }
+
+    },
+    expandOnHover: function () {
+      var _this = this;
+      var screenWidth = $.AdminLTE.options.screenSizes.sm - 1;
+      //Expand sidebar on hover
+      $('.main-sidebar').hover(function () {
+        if ($('body').hasClass('sidebar-mini')
+                && $("body").hasClass('sidebar-collapse')
+                && $(window).width() > screenWidth) {
+          _this.expand();
+        }
+      }, function () {
+        if ($('body').hasClass('sidebar-mini')
+                && $('body').hasClass('sidebar-expanded-on-hover')
+                && $(window).width() > screenWidth) {
+          _this.collapse();
+        }
+      });
+    },
+    expand: function () {
+      $("body").removeClass('sidebar-collapse').addClass('sidebar-expanded-on-hover');
+    },
+    collapse: function () {
+      if ($('body').hasClass('sidebar-expanded-on-hover')) {
+        $('body').removeClass('sidebar-expanded-on-hover').addClass('sidebar-collapse');
+      }
+    }
   };
 
   /* Tree()
@@ -398,6 +437,16 @@ function _init() {
       //If the body has a boxed layout, fix the sidebar bg position
       var bg = $(".control-sidebar-bg");
       _this._fix(bg);
+
+      //If the body has a fixed layout, make the control sidebar fixed      
+      if ($('body').hasClass('fixed')) {
+        _this._fixForFixed(sidebar);
+      } else {
+        //If the content height is less the sidebar's height, force max height
+        if ($('.content-wrapper, .right-side').height() < sidebar.height()) {
+          _this._fixForContent(sidebar);
+        }
+      }
     },
     //Open the control sidebar
     open: function (sidebar, slide) {
@@ -430,6 +479,18 @@ function _init() {
           'height': 'auto'
         });
       }
+    },
+    _fixForFixed: function (sidebar) {
+      sidebar.css({
+        'position': 'fixed',
+        'max-height': '100%',
+        'overflow': 'auto',
+        'padding-bottom': '50px'
+      });
+    },
+    _fixForContent: function (sidebar) {
+      $(".content-wrapper, .right-side").css('min-height', sidebar.height());
+      console.log('triggered')
     }
   };
 

dist/js/demo.js

@@ -214,6 +214,11 @@
     //Fix the problem with right sidebar and layout boxed
     if (cls == "layout-boxed")
       AdminLTE.controlSidebar._fix($(".control-sidebar-bg"));
+    if ($('body').hasClass('fixed') && cls == 'fixed') {
+      AdminLTE.pushMenu.expandOnHover();
+      AdminLTE.controlSidebar._fixForFixed($('.control-sidebar'));
+      AdminLTE.layout.activate();
+    }
   }
 
   /**

pages/layout/fixed.html

@@ -25,12 +25,18 @@
   </head>
   <!-- ADD THE CLASS fixed TO GET A FIXED HEADER AND SIDEBAR LAYOUT -->
   <!-- the fixed layout is not compatible with sidebar-mini -->
-  <body class="skin-blue fixed">
+  <body class="skin-blue fixed sidebar-mini">
     <!-- Site wrapper -->
     <div class="wrapper">
       
       <header class="main-header">
-        <a href="../../index2.html" class="logo"><b>Admin</b>LTE</a>
+        <!-- Logo -->
+        <a href="../../index2.html" class="logo">
+          <!-- mini logo for sidebar mini 50x50 pixels -->
+          <span class="logo-mini"><b>A</b>LT</span>
+          <!-- logo for regular state and mobile devices -->
+          <span class="logo-lg"><b>Admin</b>LTE</span>
+        </a>
         <!-- Header Navbar: style can be found in header.less -->
         <nav class="navbar navbar-static-top" role="navigation">
           <!-- Sidebar toggle button-->