Seperate treeview plugin and fix control sidebar for the fixed layout

build/less/AdminLTE-without-plugins.less

@@ -42,6 +42,7 @@
 @import "carousel.less";
 @import "modal.less";
 @import "social-widgets.less";
+@import "treeview.less";
 //PAGES
 //------
 @import "mailbox.less";

build/less/AdminLTE.less

@@ -42,6 +42,7 @@
 @import "carousel.less";
 @import "modal.less";
 @import "social-widgets.less";
+@import "treeview.less";
 //PAGES
 //------
 @import "mailbox.less";

build/less/control-sidebar.less

@@ -1,15 +1,15 @@
 /*
  * Component: Control sidebar. By default, this is the right sidebar.
  */
-//The sidebar's background control class
-//This is a hack to make the background visible while scrolling
+// The sidebar's background control class
+// This is a hack to make the background visible while scrolling
 .control-sidebar-bg {
   position: fixed;
   z-index: 1000;
   bottom: 0;
 }
 
-//Transitions
+// Transitions
 .control-sidebar-bg,
 .control-sidebar {
   top: 0;
@@ -18,20 +18,20 @@
   .transition(right @transition-speed ease-in-out);
 }
 
-//The sidebar
+// The sidebar
 .control-sidebar {
   position: absolute;
   padding-top: @navbar-height;
   z-index: 1010;
-  //Fix position after header collapse
+  // Fix position after header collapse
   @media (max-width: @screen-sm) {
     padding-top: @navbar-height + 50;
   }
-  //Tab panes
+  // Tab panes
   > .tab-content {
     padding: 10px 15px;
   }
-  //Open state with slide over content effect
+  // Open state with slide over content effect
   &.control-sidebar-open {
     &,
     + .control-sidebar-bg {
@@ -40,7 +40,7 @@
   }
 }
 
-//Open without slide over content
+// Open without slide over content
 .control-sidebar-open {
   .control-sidebar-bg,
   .control-sidebar {
@@ -55,7 +55,17 @@
   }
 }
 
-//Control sidebar tabs
+// Fixed Layout
+.fixed {
+  .control-sidebar {
+    position: fixed;
+    height: 100%;
+    overflow-y: auto;
+    padding-bottom: 50px;
+  }
+}
+
+// Control sidebar tabs
 .nav-tabs.control-sidebar-tabs {
   > li {
     &:first-of-type > a {
@@ -68,7 +78,7 @@
     > a {
       .border-radius(0);
 
-      //Hover and active states
+      // Hover and active states
       &,
       &:hover {
         border-top: none;
@@ -80,7 +90,7 @@
         font-size: 16px;
       }
     }
-    //Active state
+    // Active state
     &.active {
       > a {
         &,
@@ -94,7 +104,7 @@
       }
     }
   }
-  //Remove responsiveness on small screens
+  // Remove responsiveness on small screens
   @media (max-width: @screen-sm) {
     display: table;
     > li {
@@ -103,7 +113,7 @@
   }
 }
 
-//Headings in the sidebar content
+// Headings in the sidebar content
 .control-sidebar-heading {
   font-weight: 400;
   font-size: 16px;
@@ -111,14 +121,14 @@
   margin-bottom: 10px;
 }
 
-//Subheadings
+// Subheadings
 .control-sidebar-subheading {
   display: block;
   font-weight: 400;
   font-size: 14px;
 }
 
-//Control Sidebar Menu
+// Control Sidebar Menu
 .control-sidebar-menu {
   list-style: none;
   padding: 0;
@@ -155,22 +165,22 @@
   }
 }
 
-//Dark skin
+// Dark skin
 .control-sidebar-dark {
   color: @sidebar-dark-color;
-  // Background
+  //  Background
   &,
   + .control-sidebar-bg {
     background: @sidebar-dark-bg;
   }
-  // Sidebar tabs
+  //  Sidebar tabs
   .nav-tabs.control-sidebar-tabs {
     border-bottom: darken(@sidebar-dark-bg, 3%);
     > li {
       > a {
         background: darken(@sidebar-dark-bg, 5%);
         color: @sidebar-dark-color;
-        //Hover and active states
+        // Hover and active states
         &,
         &:hover,
         &:focus {
@@ -186,7 +196,7 @@
           color: #fff;
         }
       }
-      //Active state
+      // Active state
       &.active {
         > a {
           &,
@@ -200,12 +210,12 @@
       }
     }
   }
-  //Heading & subheading
+  // Heading & subheading
   .control-sidebar-heading,
   .control-sidebar-subheading {
     color: #fff;
   }
-  //Sidebar list
+  // Sidebar list
   .control-sidebar-menu {
     > li {
       > a {
@@ -222,23 +232,23 @@
   }
 }
 
-//Light skin
+// Light skin
 .control-sidebar-light {
   color: lighten(@sidebar-light-color, 10%);
-  // Background
+  //  Background
   &,
   + .control-sidebar-bg {
     background: @sidebar-light-bg;
     border-left: 1px solid @gray-lte;
   }
-  // Sidebar tabs
+  //  Sidebar tabs
   .nav-tabs.control-sidebar-tabs {
     border-bottom: @gray-lte;
     > li {
       > a {
         background: darken(@sidebar-light-bg, 5%);
         color: @sidebar-light-color;
-        //Hover and active states
+        // Hover and active states
         &,
         &:hover,
         &:focus {
@@ -251,7 +261,7 @@
           background: darken(@sidebar-light-bg, 3%);
         }
       }
-      //Active state
+      // Active state
       &.active {
         > a {
           &,
@@ -265,12 +275,12 @@
       }
     }
   }
-  //Heading & subheading
+  // Heading & subheading
   .control-sidebar-heading,
   .control-sidebar-subheading {
     color: #111;
   }
-  //Sidebar list
+  // Sidebar list
   .control-sidebar-menu {
     margin-left: -14px;
     > li {

build/less/core.less

@@ -44,26 +44,26 @@ body {
 .content-wrapper,
 .right-side,
 .main-footer {
-  //Using disposable variable to join statements with a comma
+  // Using disposable variable to join statements with a comma
   @transition-rule: @transition-speed @transition-fn,
   margin @transition-speed @transition-fn;
   .transition-transform(@transition-rule);
   margin-left: @sidebar-width;
   z-index: 820;
-  //Top nav layout
+  // Top nav layout
   .layout-top-nav & {
     margin-left: 0;
   }
   @media (max-width: @screen-xs-max) {
     margin-left: 0;
   }
-  //When opening the sidebar on large screens
+  // When opening the sidebar on large screens
   .sidebar-collapse & {
     @media (min-width: @screen-sm) {
       margin-left: 0;
     }
   }
-  //When opening the sidebar on small screens
+  // When opening the sidebar on small screens
   .sidebar-open & {
     @media (max-width: @screen-xs-max) {
       .translate(@sidebar-width, 0);
@@ -109,16 +109,20 @@ body {
       max-width: 100%;
     }
   }
+  .wrapper {
+    overflow: hidden;
+  }
 }
 
-body.hold-transition {
+.hold-transition {
   .content-wrapper,
   .right-side,
   .main-footer,
   .main-sidebar,
   .left-side,
   .main-header .navbar,
-  .main-header .logo {
+  .main-header .logo,
+  .menu-open .fa-angle-left {
     /* Fix for IE */
     .transition(none);
   }

build/less/mixins.less

@@ -74,22 +74,12 @@
 }
 
 //Different radius each side
-.border-radius(@top-left;
-@top-right
-;
-@bottom-left
-;
-@bottom-right
-)
+.border-radius(@top-left,  @top-right,  @bottom-left,  @bottom-right)
 {
-  border-top-left-radius: @top-left
-;
-  border-top-right-radius: @top-right
-;
-  border-bottom-right-radius: @bottom-right
-;
-  border-bottom-left-radius: @bottom-left
-;
+  border-top-left-radius: @top-left;
+  border-top-right-radius: @top-right;
+  border-bottom-right-radius: @bottom-right;
+  border-bottom-left-radius: @bottom-left;
 }
 
 //Gradient background
@@ -140,9 +130,13 @@
       border-left: 3px solid transparent;
     }
     //Hover and active states
-    &:hover > a, &.active > a {
+    &:hover > a,
+    &.active > a,
+    &.menu-open > a {
       color: @sidebar-dark-hover-color;
       background: @sidebar-dark-hover-bg;
+    }
+    &.active > a {
       border-left-color: @link-hover-border-color;
     }
     //First Level Submenu
@@ -159,7 +153,7 @@
     }
   }
   //All submenus
-  .treeview-menu {
+  .sidebar-menu .treeview-menu {
     > li {
       > a {
         color: @sidebar-dark-submenu-color;
@@ -211,7 +205,10 @@
   }
   .content-wrapper,
   .main-footer {
-    border-left: 1px solid @gray-lte;
+    //border-left: 1px solid @gray-lte;
+  }
+  .main-sidebar {
+    border-right: 1px solid @gray-lte;
   }
   //User Panel (resides in the sidebar)
   .user-panel {
@@ -261,7 +258,7 @@
     }
   }
   //All submenus
-  .treeview-menu {
+  .sidebar-menu .treeview-menu {
     > li {
       > a {
         color: @sidebar-light-submenu-color;

build/less/sidebar-mini.less

@@ -42,49 +42,11 @@
           }
 
           > .treeview-menu {
-            //Add some padding to the treeview menu
+            // Add some padding to the treeview menu
             padding-top: 5px;
             padding-bottom: 5px;
             border-bottom-right-radius: 4px;
           }
-
-          //Show menu items on hover
-          &:hover {
-            > a {
-              //overflow: visible;
-            }
-            > a > span:not(.pull-right),//:not(.pull-right-container),
-            > .treeview-menu {
-              display: block !important;
-              position: absolute;
-              width: @sidebar-width - 50;
-              left: 50px;
-            }
-
-            //position the header & treeview menus
-            > a > span {
-              top: 0;
-              margin-left: -3px;
-              padding: 12px 5px 12px 20px;
-              background-color: inherit;
-            }
-            > a > .pull-right-container {
-              //display: block!important;
-              position: relative!important;
-              float: right;
-              width: auto!important;
-              left: 200px - 20px!important;
-              top: -22px!important;
-              z-index: 900;
-              > .label:not(:first-of-type) {
-                display: none;
-              }
-            }
-            > .treeview-menu {
-              top: 44px;
-              margin-left: 0;
-            }
-          }
         }
       }
 
@@ -124,6 +86,56 @@
   }
 }
 
+// Show menu items on hover
+.sidebar-mini:not(.sidebar-mini-expand-feature).sidebar-collapse {
+  .sidebar-menu > li:hover {
+    > a {
+      //overflow: visible;
+    }
+    > a > span:not(.pull-right), //:not(.pull-right-container),
+    > .treeview-menu {
+      display: block !important;
+      position: absolute;
+      width: @sidebar-width - 50;
+      left: 50px;
+    }
+
+    //position the header & treeview menus
+    > a > span {
+      top: 0;
+      margin-left: -3px;
+      padding: 12px 5px 12px 20px;
+      background-color: inherit;
+    }
+    > a > .pull-right-container {
+      //display: block!important;
+      position: relative !important;
+      float: right;
+      width: auto !important;
+      left: 200px - 20px !important;
+      top: -22px !important;
+      z-index: 900;
+      > .label:not(:first-of-type) {
+        display: none;
+      }
+    }
+    > .treeview-menu {
+      top: 44px;
+      margin-left: 0;
+    }
+  }
+}
+
+.sidebar-expanded-on-hover {
+  .main-footer,
+  .content-wrapper {
+    margin-left: 50px;
+  }
+  .main-sidebar {
+    box-shadow: @sidebar-expanded-shadow;
+  }
+}
+
 //A fix for text overflow while transitioning from sidebar mini to full sidebar
 .sidebar-menu,
 .main-sidebar .user-panel,

build/less/sidebar.less

@@ -119,6 +119,7 @@
     height: auto;
     padding: 0;
     margin-right: 10px;
+    .transition(transform .5s ease);
   }
   li > a > .fa-angle-left {
     position: absolute;
@@ -126,44 +127,14 @@
     right: 10px;
     margin-top: -8px;
   }
-  li.active {
+
+  .menu-open {
     > a > .fa-angle-left,
     > a > .pull-right-container > .fa-angle-left {
       .rotate(-90deg);
     }
-    > .treeview-menu {
-      display: block;
-    }
   }
-
-  // Tree view menu
-  .treeview-menu {
-    display: none;
-    list-style: none;
-    padding: 0;
-    margin: 0;
-    padding-left: 5px;
-    .treeview-menu {
-      padding-left: 20px;
-    }
-    > li {
-      margin: 0;
-      > a {
-        padding: 5px 5px 5px 15px;
-        display: block;
-        font-size: 14px;
-        > .fa,
-        > .glyphicon,
-        > .ion {
-          width: 20px;
-        }
-        > .pull-right-container > .fa-angle-left,
-        > .pull-right-container > .fa-angle-down,
-        > .fa-angle-left,
-        > .fa-angle-down {
-          width: auto;
-        }
-      }
-    }
+  .active > .treeview-menu {
+    display: block;
   }
 }

build/less/variables.less

@@ -1,22 +1,22 @@
-//AdminLTE 2 Variables.less
-//=========================
+// AdminLTE 2 Variables.less
+// =========================
 
-//PATHS
-//--------------------------------------------------------
+// PATHS
+// --------------------------------------------------------
 
 @boxed-layout-bg-image-path: "../img/boxed-bg.jpg";
 
-//COLORS
-//--------------------------------------------------------
-//Primary
+// COLORS
+// --------------------------------------------------------
+// Primary
 @light-blue: #3c8dbc;
-//Danger
+// Danger
 @red: #dd4b39;
-//Success
+// Success
 @green: #00a65a;
-//Info
+// Info
 @aqua: #00c0ef;
-//Warning
+// Warning
 @yellow: #f39c12;
 @blue: #0073b7;
 @navy: #001F3F;
@@ -30,27 +30,27 @@
 @black: #111;
 @gray-lte: #d2d6de;
 
-//LAYOUT
-//--------------------------------------------------------
+// LAYOUT
+// --------------------------------------------------------
 
-//Side bar and logo width
+// Side bar and logo width
 @sidebar-width: 230px;
-//Boxed layout maximum width
+// Boxed layout maximum width
 @boxed-layout-max-width: 1024px;
-//When the logo should go to the top of the screen
+// When the logo should go to the top of the screen
 @screen-header-collapse: @screen-xs-max;
 
-//Link colors (Aka: <a> tags)
+// Link colors (Aka: <a> tags)
 @link-color: @light-blue;
 @link-hover-color: lighten(@link-color, 15%);
 
-//Body background (Affects main content background only)
+// Body background (Affects main content background only)
 @body-bg: #ecf0f5;
 
-//SIDEBAR SKINS
-//--------------------------------------------------------
+// SIDEBAR SKINS
+// --------------------------------------------------------
 
-//Dark sidebar
+// Dark sidebar
 @sidebar-dark-bg: #222d32;
 @sidebar-dark-hover-bg: darken(@sidebar-dark-bg, 2%);
 @sidebar-dark-color: lighten(@sidebar-dark-bg, 60%);
@@ -59,7 +59,7 @@
 @sidebar-dark-submenu-color: lighten(@sidebar-dark-submenu-bg, 40%);
 @sidebar-dark-submenu-hover-color: #fff;
 
-//Light sidebar
+// Light sidebar
 @sidebar-light-bg: #f9fafc;
 @sidebar-light-hover-bg: lighten(#f0f0f1, 1.5%);
 @sidebar-light-color: #444;
@@ -68,55 +68,58 @@
 @sidebar-light-submenu-color: #777;
 @sidebar-light-submenu-hover-color: #000;
 
-//CONTROL SIDEBAR
-//--------------------------------------------------------
+// sidebar-expanded-on-hover
+@sidebar-expanded-shadow: 3px 0 8px rgba(0,0,0,.125);
+
+// CONTROL SIDEBAR
+// --------------------------------------------------------
 @control-sidebar-width: @sidebar-width;
 
-//BOXES
-//--------------------------------------------------------
+// BOXES
+// --------------------------------------------------------
 @box-border-color: #f4f4f4;
 @box-border-radius: 3px;
 @box-footer-bg: #fff;
 @box-boxshadow: 0 1px 1px rgba(0, 0, 0, .1);
 @box-padding: 10px;
 
-//Box variants
+// Box variants
 @box-default-border-top-color: #d2d6de;
 
-//BUTTONS
-//--------------------------------------------------------
+// BUTTONS
+// --------------------------------------------------------
 @btn-boxshadow: none;
 
-//PROGRESS BARS
-//--------------------------------------------------------
+// PROGRESS BARS
+// --------------------------------------------------------
 @progress-bar-border-radius: 1px;
 @progress-bar-sm-border-radius: 1px;
 @progress-bar-xs-border-radius: 1px;
 
-//FORMS
-//--------------------------------------------------------
+// FORMS
+// --------------------------------------------------------
 @input-radius: 0;
 
-//BUTTONS
-//--------------------------------------------------------
+// BUTTONS
+// --------------------------------------------------------
 
-//Border radius for non flat buttons
+// Border radius for non flat buttons
 @btn-border-radius: 3px;
 
-//DIRECT CHAT
-//--------------------------------------------------------
+// DIRECT CHAT
+// --------------------------------------------------------
 @direct-chat-height: 250px;
 @direct-chat-default-msg-bg: @gray-lte;
 @direct-chat-default-font-color: #444;
 @direct-chat-default-msg-border-color: @gray-lte;
 
-//CHAT WIDGET
-//--------------------------------------------------------
+// CHAT WIDGET
+// --------------------------------------------------------
 @attachment-border-radius: 3px;
 
-//TRANSITIONS SETTINGS
-//--------------------------------------------------------
+// TRANSITIONS SETTINGS
+// --------------------------------------------------------
 
-//Transition global options
+// Transition global options
 @transition-speed: .3s;
 @transition-fn: ease-in-out;