new #right off-canvas

new right.less file added
rewrite layout.less and menu.less files
remove affixed #menu
added sticky #left option
sidebar-left-mini #menu hover option changed

Author: onokumus

dist/app.js

@@ -1,6 +1,6 @@
 /**
  * bootstrap-admin-template - Free Admin Template Based On Twitter Bootstrap 3.x
- * @version 2.4.1
+ * @version 2.4.2
  * @license MIT
  * @link https://github.com/puikinsh/Bootstrap-Admin-Template
  */

dist/app.min.js

@@ -1,6 +1,6 @@
 /**
  * bootstrap-admin-template - Free Admin Template Based On Twitter Bootstrap 3.x
- * @version 2.4.1
+ * @version 2.4.2
  * @license MIT
  * @link https://github.com/puikinsh/Bootstrap-Admin-Template
  */
@@ -47,7 +47,8 @@
 
     var $navBar = $('nav.navbar'),
         $body = $('body'),
-        $menu = $('#menu');
+        $menu = $('#menu'),
+        $left = $('#left');
 
     function addPaddingTop(el, val) {
         el.css('padding-top', val);
@@ -66,20 +67,8 @@
         $body.css('padding-top', bodyPadTop);
 
         if ($body.hasClass('menu-affix')) {
-            $menu.affix({
-                offset: {
-                    top: $menu.offset().top
-                }
-            }).css({
-                height: function height() {
-                    if ($(window).width() < 768) {
-                        return $(window).height();
-                    } else {
-                        return $(window).height();
-                    }
-                },
-                top: bodyPadTop - 1,
-                bottom: 0
+            $left.css({
+                top: bodyPadTop
             });
             console.log($navBar.outerHeight(true));
         }
@@ -168,7 +157,6 @@
 ;(function ($, Metis) {
     var $body = $('body'),
         $leftToggle = $('.toggle-left'),
-        $rightToggle = $('.toggle-right'),
         $count = 0;
 
     Metis.metisAnimatePanel = function () {
@@ -196,25 +184,6 @@
         } else {
             $leftToggle.addClass('hidden');
         }
-        if ($('#right').length) {
-            $rightToggle.on(Metis.buttonPressedEvent, function (e) {
-                switch (true) {
-                    // Close right panel
-                    case $body.hasClass("sidebar-right-opened"):
-                        $body.removeClass("sidebar-right-opened");
-                        break;
-                    default:
-                        // Open right panel
-                        $body.addClass("sidebar-right-opened");
-                        if (!$body.hasClass("sidebar-left-mini") & !$body.hasClass("sidebar-left-hidden")) {
-                            $body.addClass("sidebar-left-mini");
-                        }
-                }
-                e.preventDefault();
-            });
-        } else {
-            $rightToggle.addClass('hidden');
-        }
     };
     return Metis;
 })(jQuery, Metis || {});

dist/core.js

@@ -1,14 +1,14 @@
 /**
  * bootstrap-admin-template - Free Admin Template Based On Twitter Bootstrap 3.x
- * @version 2.4.1
+ * @version 2.4.2
  * @license MIT
  * @link https://github.com/puikinsh/Bootstrap-Admin-Template
  */
 /* ==========================================================================
 metisAdmin: Base
 ========================================================================== */
 body {
-  transition: all 0.3s ease-in-out;
+  font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
 }
 /*********************************************************/
 /*                 Layout Styles                         */
@@ -59,8 +59,7 @@ body {
   margin: 0 auto;
   position: relative;
 }
-#left,
-#right {
+#left {
   transition: all 0.3s ease-in-out;
   width: 250px;
   z-index: 999;
@@ -69,29 +68,13 @@ body {
   position: absolute;
   left: -250px;
 }
-#right {
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  overflow-y: auto;
-  right: -250px;
-}
 .sidebar-left-opened #left {
   left: 0;
 }
-.sidebar-right-opened {
-  position: relative;
-  right: 250px;
-}
-.sidebar-right-opened #right {
-  right: 0;
-}
-.sidebar-right-opened.fixed .navbar-fixed-top {
-  right: 250px;
-}
 @media (min-width: 768px) {
   #left {
-    position: relative;
+    position: -webkit-sticky;
+    position: sticky;
     float: left;
     left: auto;
   }
@@ -106,13 +89,6 @@ body {
     transition: all 0.3s ease-in-out;
     overflow: hidden;
   }
-  .sidebar-right-opened {
-    right: 0;
-    margin-right: 250px;
-  }
-  .sidebar-right-opened .navbar-fixed-top {
-    margin-right: 250px;
-  }
 }
 @media (min-width: 1200px) {
   body.boxed {
@@ -132,6 +108,14 @@ body {
   }
 }
 /* ================== END Template Layout ============== */
+/*********************************************************/
+/*                 right onoffcanvas                    */
+/*********************************************************/
+#right {
+  width: 250px;
+  overflow-y: auto;
+  padding: 1rem;
+}
 /* BEGIN TOP bar */
 #top .navbar {
   margin-bottom: 0;
@@ -369,58 +353,22 @@ body {
 #menu > li ul a:hover {
   background-color: rgba(0, 0, 0, 0.1);
 }
-#menu.affix {
-  position: fixed;
-  width: 250px;
-  overflow-x: hidden;
-  overflow-y: hidden;
-  -webkit-overflow-scrolling: touch;
-}
-#menu.affix:hover {
-  overflow-y: scroll;
-}
 @media (min-width: 768px) {
-  body:not(.sidebar-left-mini) #menu li.active > ul,
-  #menu.affix li > ul {
-    position: relative;
-    top: auto !important;
-    left: auto !important;
-    right: auto !important;
-  }
-  body:not(.sidebar-left-mini) #menu:not(.affix) li.active > ul {
-    display: inherit;
-  }
-  #menu li > ul,
-  .sidebar-left-mini #menu li > ul {
+  .sidebar-left-mini #menu > li > ul {
     position: absolute;
     top: 0;
     left: 100%;
     box-shadow: none;
     min-width: 200px;
     z-index: 1;
     background-color: rgba(0, 0, 0, 0.8);
-  }
-  #menu:not(.affix) li > ul,
-  .sidebar-left-mini #menu:not(.affix) li > ul {
     display: none;
-  }
-  .sidebar-left-mini #menu > li > ul {
     top: 100%;
   }
-  #menu li > ul > li > ul {
-    top: 0;
-  }
-  .side-right #menu li > ul {
-    left: auto;
-    right: 100%;
-  }
-  #menu:not(.affix) li:hover > ul {
+  .sidebar-left-mini #menu > li:hover > ul {
     display: inherit;
     visibility: visible;
   }
-  .sidebar-left-mini #menu.affix {
-    position: relative !important;
-  }
 }
 @media (min-width: 768px) {
   .sidebar-left-mini #menu > li > a .fa {
@@ -435,7 +383,7 @@ body {
     box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
     position: absolute;
     left: 100%;
-    top: -1px;
+    top: 0;
     z-index: 1;
     background: rgba(0, 0, 0, 0.85);
     display: none;
@@ -445,12 +393,6 @@ body {
     display: block;
     min-width: 200px;
   }
-  .sidebar-left-mini.side-right #menu > li > a .link-title {
-    border-right-width: 0;
-    border-left: 1px solid rgba(0, 0, 0, 0.1);
-    left: auto;
-    right: 100%;
-  }
 }
 body:not(.sidebar-left-mini) #menu .nav-header {
   padding: 3px 15px !important;