diff --git a/pages/_includes/layout/sidenav.html b/pages/_includes/layout/sidenav.html
index 54559d97a..28a17dfd2 100644
--- a/pages/_includes/layout/sidenav.html
+++ b/pages/_includes/layout/sidenav.html
@@ -1,6 +1,9 @@
 {% assign menu = page.menu | default: layout.menu %}
-<aside class="navbar navbar-side {% if include.dark %}navbar-dark bg-dark text-white{% else %}navbar-light{% endif %}{% if include.fixed %} navbar-fixed{% endif %}{% if include.right %} navbar-right{% endif %}{% if include.folded %} navbar-folded{% endif %} js-sidebar" id="sidebar">
+<aside class="sidenav {% if include.class %} {{ include.class }}{% endif %} {% if include.dark %}sidenav-dark bg-dark text-white{% else %}sidenav-light{% endif %}{% if include.fixed %} sidenav-fixed{% endif %}{% if include.right %} sidenav-right{% endif %}{% if include.folded %} sidenav-folded{% endif %} js-sidebar" id="sidebar">
+
+   {% comment %}
    {% unless include.empty %}
    {% include layout/sidenav-content.html menu=menu dark=include.dark %}
    {% endunless %}
+   {% endcomment %}
 </aside>
diff --git a/pages/_layouts/base.html b/pages/_layouts/base.html
index abec88ac5..7e4ae75e5 100644
--- a/pages/_layouts/base.html
+++ b/pages/_layouts/base.html
@@ -2,7 +2,7 @@
 <html lang="en" {% if page.rtl %} dir="rtl" {% endif %}>
 <head>
    <meta charset="utf-8"/>
-   <meta name="viewport" content="width=device-width, initial-scale=1"/>
+   <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
    <meta http-equiv="Content-Language" content="en"/>
 
@@ -32,8 +32,7 @@
 
    <style>body { display: none; }</style>
 </head>
-<body
-   class="antialiased {% if page.dark-theme %} theme-dark{% endif %}{% if layout.body-class %} {{ layout.body-class }}{% endif %}{% if page.body-class %} {{ page.body-class }}{% endif %}">
+<body class="antialiased {% if page.dark-theme %} theme-dark{% endif %}{% if layout.body-class %} {{ layout.body-class }}{% endif %}{% if page.body-class %} {{ page.body-class }}{% endif %}">
 
 {{ content}}
 
diff --git a/pages/_layouts/default.html b/pages/_layouts/default.html
index 1aa40dacc..8328f3f55 100644
--- a/pages/_layouts/default.html
+++ b/pages/_layouts/default.html
@@ -2,16 +2,20 @@
 layout: base
 ---
 
-<div class="layout d-flex flex-row vh-100">
+<div class="layout d-flex flex-row h-100p">
    {% if page.nav-side %}
    {% include layout/sidenav.html dark=page.nav-dark folded=page.nav-folded fixed=page.nav-fixed right=page.nav-right %}
    {% endif %}
 
+   {% include layout/sidenav.html class=page.side-class dark=true %}
+
    <div class="layout-main d-flex flex-column flex-fill max-w-full">
+      {% comment %}
       {% unless page.nav-side %}
       {% include layout/topnav.html dark=page.header-dark sticky=page.header-sticky %}
       {% include layout/topmenu.html %}
       {% endunless %}
+      {% endcomment %}
 
       <main class="container{% if page.container-size %} container-{{ page.container-size }}{% endif %}{% if page.fluid %}-fluid{% endif %} my-4 flex-fill">
          {% include layout/page-title.html %}
diff --git a/pages/layout-test.html b/pages/layout-test.html
new file mode 100644
index 000000000..2df066a83
--- /dev/null
+++ b/pages/layout-test.html
@@ -0,0 +1,33 @@
+---
+title: Layout test
+side-class: sidenav-expanded-xl sidenav-folded-lg
+---
+
+<div class="card" id="card-test">
+   <div class="card-body">
+      <a href="#" class="btn btn-secondary btn-block" id="toggle-sidebar">sidebar</a>
+      <div id="card-body"></div>
+   </div>
+</div>
+
+{% capture_global scripts %}
+<script>
+	$(document).ready(function () {
+		var $test_el = $('#card-test'),
+			$test_body_el = $('#card-body'),
+			test_width = function () {
+				$test_body_el.text($test_el.width());
+			};
+
+		test_width();
+
+		$(window).on('resize', function () {
+			test_width();
+		});
+
+		$('#toggle-sidebar').on('click', function () {
+         $('body').toggleClass('show-sidenav');
+		});
+	});
+</script>
+{% endcapture_global %}
diff --git a/scss/_variables.scss b/scss/_variables.scss
index b14956d4f..5d4ee6c2f 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -175,7 +175,6 @@ $sizes-percentage: (
 ) !default;
 
 
-$loader-size: 2.5rem !default;
 
 $generate-social-colors: true !default;
 $generate-color-hues: true !default;
@@ -183,8 +182,6 @@ $generate-colors: true !default;
 
 $enable-gradients: false !default;
 
-$grid-gutter-width: 24px !default;
-
 $grid-breakpoints: (
   xs: 0,
   sm: 576px,
@@ -257,6 +254,12 @@ $dropdown-padding-y: .5rem !default;
 $dropdown-link-hover-bg: $hover-bg !default;
 $dropdown-link-hover-color: inherit !default;
 
+//grid
+$grid-gutter-width: 2rem !default;
+
+//loader
+$loader-size: 2.5rem !default;
+
 //navbar
 $navbar-bg: $white !default;
 $navbar-border-color: $border-color !default;
diff --git a/scss/layout/_navbar.scss b/scss/layout/_navbar.scss
index e12db2e8f..40f3ccc89 100644
--- a/scss/layout/_navbar.scss
+++ b/scss/layout/_navbar.scss
@@ -11,12 +11,6 @@ Navbar logo
   height: 2rem;
 }
 
-//.nav-link {
-//  &.active {
-//    color: $primary;
-//  }
-//}
-//
 .navbar-nav {
   flex-direction: row;
   margin-right: -($navbar-padding-x);
@@ -35,421 +29,6 @@ Navbar logo
       border-bottom: 1px solid $primary;
     }
   }
-
-  //
-  //  .nav-link {
-  //    display: flex;
-  //    color: $text-muted;
-  //    transition: .3s color;
-  //
-  //    &:hover {
-  //      color: $body-color;
-  //    }
-  //  }
-  //
-  //  .nav-item {
-  //    position: relative;
-  //  }
-  //
-  //  .navbar-nav {
-  //    padding-right: .5rem;
-  //    padding-left: .5rem;
-  //  }
 }
 
 
-//.navbar:not(.navbar-side) .navbar-subnav {
-//  position: absolute;
-//  top: 100%;
-//  left: 0;
-//  z-index: $zindex-tooltip;
-//  width: 12rem;
-//  padding: .25rem;
-//  font-size: $h5-font-size;
-//  background: #fff;
-//  border: 1px solid $border-color;
-//  border-radius: 3px;
-//  box-shadow: 0 .5rem 1rem rgba(18, 18, 18, .15);
-//
-//  .nav {
-//    flex-direction: column;
-//  }
-//}
-//
-///**
-//Navbar brand
-// */
-//.navbar-brand {
-//  display: flex;
-//  align-items: center;
-//  justify-content: center;
-//  padding: 0;
-//  margin: 0;
-//
-//  @at-root a#{&} {
-//    transition: .3s opacity;
-//
-//    &:hover {
-//      opacity: .8;
-//    }
-//  }
-//}
-//
-//.navbar-brand-logo {
-//  height: 2rem;
-//}
-//
-///**
-//Navbar toggler
-// */
-//.navbar-toggler {
-//  padding: 0;
-//  border: 0;
-//}
-//
-
-$navbar-side-padding-x: 1rem;
-$navbar-side-padding-y: 1rem;
-$navbar-active-color: $primary;
-
-/*
-Sidebar
- */
-.navbar-side {
-  flex-direction: column;
-  flex-wrap: nowrap;
-  align-items: inherit;
-  justify-content: start;
-  width: $sidenav-width;
-  min-width: $sidenav-width;
-  margin: 0;
-  overflow: auto;
-  pointer-events: inherit;
-  user-select: none;
-  background: $sidenav-bg;
-  padding: $navbar-side-padding-y $navbar-side-padding-x;
-
-  box-shadow: 1px 0 $sidenav-border-color;
-
-  .navbar-brand {
-    text-align: center;
-    padding: 0;
-    margin: 0 0 1.5rem;
-    display: block;
-  }
-
-  .navbar-nav {
-    flex-direction: column;
-    margin-left: -$navbar-side-padding-y;
-    margin-right: -$navbar-side-padding-y;
-
-    .nav-link {
-      padding: .5rem $navbar-side-padding-y;
-    }
-
-    .nav-item.active .nav-link {
-      box-shadow: inset 2px 0 $navbar-active-color;
-      background: rgba($navbar-active-color, .04);
-
-      &:after {
-        content: none;
-      }
-    }
-  }
-
-  .nav-icon {
-    width: 1.5rem;
-  }
-
-  /*
-  Right navbar
-   */
-  &.navbar-right {
-    order: 9;
-    box-shadow: -1px 0 $sidenav-border-color;
-  }
-
-  /*
-  Folded navbar
-   */
-  &.navbar-folded {
-    width: $sidenav-folded-width;
-    min-width: $sidenav-folded-width;
-
-    .navbar-heading {
-      display: none;
-    }
-
-    .nav-text {
-      display: none;
-    }
-
-    .nav-icon {
-      margin: .25rem 0;
-      width: 100%;
-      font-size: 1.125rem;
-
-      .icon {
-        margin: 0 auto;
-        stroke-width: 1.5;
-      }
-    }
-  }
-
-  .navbar-heading {
-    @include subheader;
-    margin: 0 0 .5rem;
-  }
-
-  .nav-link {
-  }
-
-  //  .nav {
-  //    flex-direction: column;
-  //  }
-  //
-  //  .nav-link {
-  //    display: flex;
-  //    align-items: center;
-  //    height: 2.5rem;
-  //    padding: 0 $navbar-padding-x;
-  //    color: $text-muted;
-  //    box-shadow: inset 2px 0 0 0 transparent;
-  //    transition: .3s background, .3s box-shadow;
-  //
-  //    &[aria-expanded="true"],
-  //    &:hover {
-  //      background: rgba($link-color, .04);
-  //      border-color: $primary;
-  //      box-shadow: inset 2px 0 0 0 $primary;
-  //    }
-  //
-  //    > .icon {
-  //      width: 2rem;
-  //    }
-  //
-  //    &[data-toggle="collapse"] {
-  //      &::after {
-  //        display: block;
-  //        margin-left: auto;
-  //        font-family: $font-icons !important;
-  //        content: "";
-  //        transition: transform .3s;
-  //      }
-  //
-  //      &[aria-expanded="true"]::after {
-  //        transform: rotate(-180deg);
-  //      }
-  //    }
-  //  }
-  //
-  //  &:not(.navbar-folded) {
-  //    &[data-toggle="collapse"][aria-expanded="true"] {
-  //      background: none;
-  //      box-shadow: none;
-  //    }
-  //  }
-  //
-  //  &:not(.hide-navbar-folded) {
-  //    //.nav-item .nav-item .nav-link {
-  //    //  padding-left: 2.5rem;
-  //    //}
-  //    //
-  //    //.nav-item .nav-item .nav-item .nav-link {
-  //    //  padding-left: 3.5rem;
-  //    //}
-  //    //
-  //    //.nav-item .nav-item .nav-item .nav-item .nav-link {
-  //    //  padding-left: 4.5rem;
-  //    //}
-  //  }
-  //
-  //  .navbar-brand {
-  //    height: 2.5rem;
-  //    text-align: center;
-  //  }
-  //
-
-
-  //
-  //  .navbar-nav {
-  //    flex-direction: column;
-  //  }
-}
-
-///*
-//Fixed navbar
-// */
-//.navbar-fixed {
-//  position: fixed;
-//  top: 0;
-//  bottom: 0;
-//  z-index: $zindex-sticky;
-//
-//  &.navbar-side {
-//    top: 0;
-//    bottom: 0;
-//    left: 0;
-//
-//    &.navbar-right {
-//      right: 0;
-//      left: auto;
-//    }
-//  }
-//}
-//
-//.navbar-side {
-//  display: none;
-//
-//  @include media-breakpoint-up(xl) {
-//    display: flex;
-//
-//    &.navbar-fixed {
-//      & ~ .layout-main {
-//        margin-left: $sidenav-width;
-//      }
-//
-//      &.navbar-right ~ .layout-main {
-//        margin-right: $sidenav-width;
-//        margin-left: 0;
-//      }
-//    }
-//  }
-//
-//  &.navbar-folded {
-//    display: flex;
-//
-//    &.navbar-fixed {
-//      @include media-breakpoint-up(lg) {
-//
-//        & ~ .layout-main {
-//          margin-left: $sidenav-folded-width;
-//        }
-//
-//        &.navbar-right ~ .layout-main {
-//          margin-right: $sidenav-folded-width;
-//          margin-left: 0;
-//        }
-//      }
-//    }
-//  }
-//}
-
-///*
-//Dark navbar
-// */
-//.navbar-dark {
-//  color: #fff;
-//  background-color: $sidenav-dark-bg;
-//
-//  .navbar-brand {
-//    filter: brightness(0) invert(1);
-//  }
-//
-//  .navbar-divider {
-//    border-color: rgba(#fff, .2);
-//  }
-//
-//  .nav-link {
-//    color: inherit;
-//  }
-//}
-//
-///**
-//Sticky navbar
-// */
-//.navbar-sticky {
-//  position: sticky;
-//  top: 0;
-//  z-index: 100;
-//
-//  &.navbar-side {
-//    left: 0;
-//  }
-//}
-
-/**
-Folded navbar
- */
-//.navbar-folded {
-//  width: $sidenav-folded-width;
-//  min-width: $sidenav-folded-width;
-  //
-  //  .navbar-brand {
-  //    width: 2.5rem;
-  //  }
-  //
-  //  .navbar-heading {
-  //    display: none;
-  //  }
-  //
-  //  .nav-text {
-  //    display: none;
-  //  }
-  //
-  //  .nav-link {
-  //    justify-content: center;
-  //    padding-top: 0;
-  //    padding-bottom: 0;
-  //
-  //    &[data-toggle="collapse"]::after {
-  //      content: none;
-  //    }
-  //  }
-  //
-  //  .nav-icon {
-  //    justify-content: center;
-  //    opacity: 1;
-  //  }
-  //
-  //  .navbar-subnav {
-  //    position: absolute;
-  //    top: 0;
-  //    left: 100%;
-  //    background: #fff;
-  //
-  //    .nav-text {
-  //      display: block;
-  //    }
-  //
-  //    .nav-link {
-  //      color: $body-color;
-  //    }
-  //  }
-  //}
-  //
-  //.nav-icon {
-  //  display: flex;
-  //  flex-shrink: 0;
-  //  align-items: center;
-  //  width: 1.5rem;
-  //  font-size: px2rem(15px);
-  //  border-radius: 100%;
-  //  opacity: .8;
-  //
-  //  .icon {
-  //    font-size: inherit;
-  //  }
-//}
-
-//.nav-text {
-//  display: flex;
-//  align-items: center;
-//  width: 100%;
-//}
-
-/**
-Utils
- */
-.hide-navbar-folded {
-  @at-root .navbar-side.navbar-folded & {
-    display: none;
-  }
-}
-
-.hide-navbar-expanded {
-  @at-root .navbar-side:not(.navbar-folded) & {
-    display: none;
-  }
-}
-
diff --git a/scss/layout/_sidenav.scss b/scss/layout/_sidenav.scss
new file mode 100644
index 000000000..9ab8bfaa0
--- /dev/null
+++ b/scss/layout/_sidenav.scss
@@ -0,0 +1,121 @@
+$sidenav-padding-x: 1rem;
+$sidenav-padding-y: 1rem;
+$sidenav-active-color: $primary;
+$breakpoints: $grid-breakpoints;
+
+@mixin sidenav-base {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  z-index: $zindex-fixed;
+  opacity: 0;
+  transform: translateX(-100%);
+  transition: .3s opacity, .3s transform;
+  will-change: transform;
+
+  @include sidenav-expanded;
+
+  body.show-sidenav & {
+    @include sidenav-visible-common;
+  }
+}
+
+@mixin sidenav-visible-common {
+  transform: translateX(0);
+  opacity: 1;
+}
+
+@mixin sidenav-expanded {
+  width: $sidenav-width;
+  min-width: $sidenav-width;
+
+  &:before {
+    content: 'sidenav'
+  }
+}
+
+@mixin sidenav-folded {
+  @include sidenav-visible-common;
+  width: $sidenav-folded-width;
+  min-width: $sidenav-folded-width;
+
+  &:before {
+    content: 'sidenav-folded'
+  }
+}
+
+/*
+Sidebar
+ */
+.sidenav {
+  @include sidenav-base;
+
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  align-items: inherit;
+  justify-content: start;
+
+  margin: 0;
+  overflow: auto;
+  pointer-events: inherit;
+  user-select: none;
+  background: $sidenav-bg;
+  padding: $sidenav-padding-y $sidenav-padding-x;
+  padding: 0; //todo: remove
+
+  box-shadow: 1px 0 $sidenav-border-color;
+
+
+
+  /*
+  Right navbar
+   */
+  &.navbar-right {
+    order: 9;
+    box-shadow: -1px 0 $sidenav-border-color;
+  }
+}
+
+/*
+Folded navbar
+ */
+.sidenav-folded {
+  @each $breakpoint in map-keys($breakpoints) {
+    $infix: breakpoint-infix($breakpoint, $breakpoints);
+
+    @include media-breakpoint-up($breakpoint, $breakpoints) {
+      &#{$infix} {
+        @include sidenav-folded;
+      }
+    }
+  }
+}
+
+.sidenav-expanded {
+  @each $breakpoint in map-keys($breakpoints) {
+    $infix: breakpoint-infix($breakpoint, $breakpoints);
+
+    @include media-breakpoint-up($breakpoint, $breakpoints) {
+      &#{$infix} {
+        @include sidenav-expanded;
+      }
+    }
+  }
+}
+
+/**
+Utils
+ */
+.hide-sidenav-folded {
+  .sidenav.sidenav-folded & {
+    display: none;
+  }
+}
+
+.hide-sidenav-expanded {
+  .sidenav:not(.sidenav-folded) & {
+    display: none;
+  }
+}
diff --git a/scss/tabler.scss b/scss/tabler.scss
index 9ddc96224..7b3a0b890 100644
--- a/scss/tabler.scss
+++ b/scss/tabler.scss
@@ -12,6 +12,7 @@
 
 @import "layout/core";
 @import "layout/navbar";
+@import "layout/sidenav";
 @import "layout/page";
 
 @import "ui/alerts";
