Updated control sidebar

build/less/control-sidebar.less

@@ -2,6 +2,8 @@
  * Component: Control sidebar. By deafult, this is the right sidebar.
  */
 .control-sidebar {
+  .translate(@control-sidebar-width, 0);
+  .transition-transform(@transition-speed ease-in-out);
   position: absolute;
   top: @navbar-height;
   right: 0;
@@ -11,11 +13,17 @@
   color: @sidebar-dark-color;
   //Make it hide in small screens
   @media (max-width: @screen-sm) {
-    .translate(@control-sidebar-width, 0);    
+    top: @navbar-height + 50;
+    //.translate(@control-sidebar-width, 0);
   }
   //Tab panes
   > .tab-content {
-    padding: 10px 15px;   
+    padding: 10px 15px;
+  }
+  //Open state
+  &.control-sidebar-open {
+    .translate(0, 0);
+    .box-shadow(-1px 0 3px rgba(0,0,0,.2));
   }
 }
 //Control sidebar tabs
@@ -23,9 +31,9 @@
   border-bottom: darken(@sidebar-dark-bg, 3%);
   > li {
     > a {
-      .border-radius(0)!important;         
+      .border-radius(0)!important;
       background: darken(@sidebar-dark-bg, 5%);
-      color: @sidebar-dark-color;    
+      color: @sidebar-dark-color;
       //Hover and active states
       &,
       &:hover {
@@ -54,22 +62,31 @@
           border-right: none!important;
           border-bottom: none!important;
           background: @sidebar-dark-bg;
-          color: #fff;          
+          color: #fff;
         }
       }
     }
-  }  
+  }
+  //Remove resposiveness on small screens
+  @media(max-width: @screen-sm) {
+    display: table;
+    >li {
+      display: table-cell!important;
+    }
+  }
 }
 //Headings in the sidebar content
 .control-sidebar-heading {
   color: #fff;
+  font-weight: 400;
+  font-size: 16px;
+  padding: 10px 0;
+  margin-bottom: 10px;
 }
 
-.content-wrapper,
-.right-side,
-.main-footer {
-  //margin-right: @control-sidebar-width;
-  @media (max-width: @screen-sm) {
-    margin-right: 0;
-  }
+.control-sidebar-subheading {
+  display: block;
+  color: #fff;
+  font-weight: 400;
+  font-size: 14px;
 }

build/less/mixins.less

@@ -232,13 +232,12 @@
     &.active {      
       border-left-color: @icon-active-color;
       > a {
-      font-weight: 600;      
+        font-weight: 600;      
       }
     }
     //First Level Submenu
-    > .treeview-menu {
-      margin: 0;
-      background: @sidebar-light-submenu-bg;
+    > .treeview-menu {      
+      background: @sidebar-light-submenu-bg;      
     }
   }
   //All links within the sidebar menu
@@ -293,6 +292,13 @@
       .border-radius(0, 2px, 0, 2px) !important;
     }
   }
+  @media(min-width: @screen-sm-min) {  
+    &.sidebar-mini.sidebar-collapse {
+      .sidebar-menu > li > .treeview-menu {
+        border-left: 1px solid @gray;
+      }           
+    }
+  }
 }
 
 //Navbar Skin Mixin

dist/css/AdminLTE.css

@@ -638,6 +638,14 @@ a:focus {
  * Component: Control sidebar. By deafult, this is the right sidebar.
  */
 .control-sidebar {
+  -webkit-transform: translate(230px, 0);
+  -ms-transform: translate(230px, 0);
+  -o-transform: translate(230px, 0);
+  transform: translate(230px, 0);
+  -webkit-transition: -webkit-transform 0.3s ease-in-out;
+  -moz-transition: -moz-transform 0.3s ease-in-out;
+  -o-transition: -o-transform 0.3s ease-in-out;
+  transition: transform 0.3s ease-in-out;
   position: absolute;
   top: 50px;
   right: 0;
@@ -648,15 +656,20 @@ a:focus {
 }
 @media (max-width: 768px) {
   .control-sidebar {
-    -webkit-transform: translate(230px, 0);
-    -ms-transform: translate(230px, 0);
-    -o-transform: translate(230px, 0);
-    transform: translate(230px, 0);
+    top: 100px;
   }
 }
 .control-sidebar > .tab-content {
   padding: 10px 15px;
 }
+.control-sidebar.control-sidebar-open {
+  -webkit-transform: translate(0, 0);
+  -ms-transform: translate(0, 0);
+  -o-transform: translate(0, 0);
+  transform: translate(0, 0);
+  -webkit-box-shadow: -1px 0 3px rgba(0, 0, 0, 0.2);
+  box-shadow: -1px 0 3px rgba(0, 0, 0, 0.2);
+}
 .control-sidebar-tabs {
   border-bottom: #1c2529;
 }
@@ -690,15 +703,26 @@ a:focus {
   background: #222d32;
   color: #fff;
 }
+@media (max-width: 768px) {
+  .control-sidebar-tabs {
+    display: table;
+  }
+  .control-sidebar-tabs > li {
+    display: table-cell !important;
+  }
+}
 .control-sidebar-heading {
   color: #fff;
+  font-weight: 400;
+  font-size: 16px;
+  padding: 10px 0;
+  margin-bottom: 10px;
 }
-@media (max-width: 768px) {
-  .content-wrapper,
-  .right-side,
-  .main-footer {
-    margin-right: 0;
-  }
+.control-sidebar-subheading {
+  display: block;
+  color: #fff;
+  font-weight: 400;
+  font-size: 14px;
 }
 /*
  * Component: Dropdown menus

dist/css/skins/_all-skins.css

@@ -235,7 +235,6 @@
   font-weight: 600;
 }
 .skin-blue-light .sidebar-menu > li > .treeview-menu {
-  margin: 0;
   background: #f4f4f5;
 }
 .skin-blue-light .sidebar a {
@@ -291,6 +290,11 @@
   border-bottom-right-radius: 2px !important;
   border-bottom-left-radius: 0 !important;
 }
+@media (min-width: 768px) {
+  .skin-blue-light.sidebar-mini.sidebar-collapse .sidebar-menu > li > .treeview-menu {
+    border-left: 1px solid #d2d6de;
+  }
+}
 .skin-blue-light .main-footer {
   border-top-color: #d2d6de;
 }
@@ -571,7 +575,6 @@
   font-weight: 600;
 }
 .skin-black-light .sidebar-menu > li > .treeview-menu {
-  margin: 0;
   background: #f4f4f5;
 }
 .skin-black-light .sidebar a {
@@ -627,6 +630,11 @@
   border-bottom-right-radius: 2px !important;
   border-bottom-left-radius: 0 !important;
 }
+@media (min-width: 768px) {
+  .skin-black-light.sidebar-mini.sidebar-collapse .sidebar-menu > li > .treeview-menu {
+    border-left: 1px solid #d2d6de;
+  }
+}
 /*
  * Skin: Green
  * -----------
@@ -856,7 +864,6 @@
   font-weight: 600;
 }
 .skin-green-light .sidebar-menu > li > .treeview-menu {
-  margin: 0;
   background: #f4f4f5;
 }
 .skin-green-light .sidebar a {
@@ -912,6 +919,11 @@
   border-bottom-right-radius: 2px !important;
   border-bottom-left-radius: 0 !important;
 }
+@media (min-width: 768px) {
+  .skin-green-light.sidebar-mini.sidebar-collapse .sidebar-menu > li > .treeview-menu {
+    border-left: 1px solid #d2d6de;
+  }
+}
 /*
  * Skin: Red
  * ---------

dist/js/app.js

@@ -57,6 +57,17 @@ $.AdminLTE.options = {
   //choose to enable the plugin, make sure you load the script
   //before AdminLTE's app.js
   enableFastclick: true,
+  //Control Sidebar Options
+  enableControlSidebar: true,
+  controlSidebarOptions: {
+    //Which button should trigger the open/close event
+    toggleBtnSelector: "[data-toggle='control-sidebar']",
+    //The sidebar selector
+    selector: ".control-sidebar",
+    //Enable slide over content animation
+    slide: false,
+    animationSpeed: 300
+  },
   //Box Widget Plugin. Enable this plugin
   //to allow boxes to be collapsed and/or removed
   enableBoxWidget: true,
@@ -134,6 +145,11 @@ $(function () {
   //Enable sidebar tree view controls
   $.AdminLTE.tree('.sidebar');
 
+  //Enable control sidebar
+  if (o.enableControlSidebar) {
+    $.AdminLTE.controlSidebar.activate(o.controlSidebarOptions);
+  }
+
   //Add slimscroll to navbar dropdown
   if (o.navbarMenuSlimscroll && typeof $.fn.slimscroll != 'undefined') {
     $(".navbar .menu").slimscroll({
@@ -347,41 +363,66 @@ function _init() {
       }
     });
   };
-  
+
   /* ControlSidebar
    * ==============
-   * Control the all of the control sidebar transitions
+   * Adds functionality to the right sidebar  
    * 
    * @type Object
-   * @usage $.Admin.controlSidebar.activate(options)
+   * @usage $.AdminLTE.controlSidebar.activate(options)
    */
   $.AdminLTE.controlSidebar = {
     //Default settings
     defaults: {
       toggleBtnSelector: "[data-toggle='control-sidebar']",
       selector: ".control-sidebar",
-      slide: false,
-      animationSpeed: 300
+      slide: true
     },
-    //Initiate the object
+    //instantiate the object
     activate: function (options) {
-      var settings = $.extend({}, options, this.defaults);
-    },
-    //Close the control sidebar
-    close: function () {
+      //Get the object
+      var _this = this;
+      //Update options
+      var o = $.extend({}, options, this.defaults);
+      //Get the sidebar
+      var sidebar = $(o.selector);
+      //The toggle button
+      var btn = $(o.toggleBtnSelector);
       
-    },
-    //Open the control sidebar
-    open: function () {
+      //Initial height fix
+      _this.fixHeight(sidebar);
+      //Fix the height when the screen size changes
+      $(window, ".content").resize(function(){
+        _this.fixHeight(sidebar);
+        console.log('debug');
+      });
       
+      //Listen to the click event
+      btn.click(function(e){
+        e.preventDefault();
+        if(!sidebar.hasClass('control-sidebar-open')) {
+          //Open the sidebar
+          _this.open(sidebar);
+        } else {
+          _this.close(sidebar);
+        }
+      });
     },
-    //If the slide option is set, this
-    //function is used to open the sidebar
-    slideIn: function() {
-      
+    //Open the control sidebar
+    open: function (sidebar) {      
+      sidebar.addClass('control-sidebar-open');
     },
-    //The complement funtion to slideIn
-    slideOut: function () {}
+    //Close the control sidebar
+    close: function (sidebar) {
+      sidebar.removeClass('control-sidebar-open');
+    },    
+    //Fix the height of the sidebar
+    fixHeight: function(sidebar) {
+      //We'll have to make it small then stretch it again so it 
+      //doesn't occupy more than the space it needs
+      sidebar.css('min-height', $(window).height() - $(".main-header").height());
+      sidebar.css('min-height', $(document).height() - $(".main-header").height());
+    }
   };
 
   /* BoxWidget

dist/js/demo.js

@@ -172,6 +172,4 @@ function setup() {
   var tmp = get('skin');
   if (tmp && $.inArray(tmp, my_skins))
     change_skin(tmp);
-  
-  change_skin('skin-blue-light');
 }

index2.html

@@ -1121,7 +1121,7 @@
       </footer>
 
       <!-- Control Sidebar -->
-      <aside class="control-sidebar">
+      <aside class="control-sidebar control-sidebar-open">
         <!-- Create the tabs -->
         <ul class="nav nav-tabs nav-justified control-sidebar-tabs">
           <li class="active"><a href="#control-sidebar-home-tab" data-toggle="tab"><i class="fa fa-home"></i></a></li>
@@ -1132,17 +1132,73 @@
         <div class="tab-content">
           <!-- Home tab content -->
           <div class="tab-pane active" id="control-sidebar-home-tab">
-            <h5 class="control-sidebar-heading"><b>News Feed</b></h5>
+            <h5 class="control-sidebar-heading">News Feed</h5>
 
-            <h5 class="control-sidebar-heading"><b>Mail</b></h5>            
+            <h5 class="control-sidebar-heading">Mail</h5>            
 
-            <h5 class="control-sidebar-heading"><b>Todo List</b></h5>           
+            <h5 class="control-sidebar-heading">Todo List</h5>           
 
           </div><!-- /.tab-pane -->
           <!-- Stats tab content -->
           <div class="tab-pane" id="control-sidebar-stats-tab">Stats Tab Content</div><!-- /.tab-pane -->
           <!-- Settings tab content -->
-          <div class="tab-pane" id="control-sidebar-settings-tab">Settings Tab Content</div><!-- /.tab-pane -->
+          <div class="tab-pane" id="control-sidebar-settings-tab">            
+            <form method="post">
+              <h5 class="control-sidebar-heading">General Settings</h5>
+              <div class="form-group">
+                <label class="control-sidebar-subheading">
+                  Report panel usage
+                  <input type="checkbox" class="pull-right" checked />
+                </label>
+                <p>
+                  Some information about this general settings option
+                </p>
+              </div><!-- /.form-group -->
+              
+              <div class="form-group">
+                <label class="control-sidebar-subheading">
+                  Allow mail redirect
+                  <input type="checkbox" class="pull-right" checked />
+                </label>
+                <p>
+                  Other sets of options are available
+                </p>
+              </div><!-- /.form-group -->
+              
+              <div class="form-group">
+                <label class="control-sidebar-subheading">
+                  Expose author name in posts
+                  <input type="checkbox" class="pull-right" checked />
+                </label>
+                <p>
+                  Allow the user to show his name in blog posts
+                </p>
+              </div><!-- /.form-group -->
+              
+              <h5 class="control-sidebar-heading">Chat Settings</h5>
+              
+              <div class="form-group">
+                <label class="control-sidebar-subheading">
+                  Show me as online
+                  <input type="checkbox" class="pull-right" checked />
+                </label>                
+              </div><!-- /.form-group -->
+              
+              <div class="form-group">
+                <label class="control-sidebar-subheading">
+                  Turn off notifications
+                  <input type="checkbox" class="pull-right" />
+                </label>                
+              </div><!-- /.form-group -->
+              
+              <div class="form-group">
+                <label class="control-sidebar-subheading">
+                  Delete chat history
+                  <a href="javascript::;" class="text-red pull-right"><i class="fa fa-trash-o"></i></a>
+                </label>                
+              </div><!-- /.form-group -->
+            </form>
+          </div><!-- /.tab-pane -->
         </div>
       </aside>
     </div><!-- ./wrapper -->
@@ -1174,7 +1230,7 @@
     <!-- AdminLTE dashboard demo (This is only for demo purposes) -->
     <script src="dist/js/pages/dashboard2.js" type="text/javascript"></script>
 
-    <!-- AdminLTE for demo purposes -->
-    <script src="dist/js/demo.js" type="text/javascript"></script>
+    <!-- AdminLTE for demo purposes --
+    <script src="dist/js/demo.js" type="text/javascript"></script-->
   </body>
 </html>