demo config fix

js/demo.js

@@ -3,6 +3,7 @@
 class TablerDemo {
   constructor() {
     this.init();
+    this.initFormControls();
 
     this.form = document.querySelector('.js-layout-form');
 
@@ -18,8 +19,6 @@ class TablerDemo {
           this.onSubmitForm();
         });
       }
-
-      this.initFormControls();
     }
   };
 
@@ -79,11 +78,13 @@ class TablerDemo {
   };
 
   setFormValue = function(name, value,) {
-    let elements = this.form.querySelectorAll(`[name="${name}"]`);
+    if(this.form) {
+      let elements = this.form.querySelectorAll(`[name="${name}"]`);
 
-    if(elements) {
+      if (elements) {
-      elements.forEach((e) => e.checked = false);
+        elements.forEach((e) => e.checked = false);
-      this.form.querySelector(`[name="${name}"][value="${value}"]`).checked = true;
+        this.form.querySelector(`[name="${name}"][value="${value}"]`).checked = true;
+      }
     }
   };
 

scss/layout/_navbar.scss

@@ -210,22 +210,26 @@ Fixed navbar
   top: 0;
   bottom: 0;
 
-  & + .layout-main {
+  @include media-breakpoint-up(xl) {
-    margin-left: $sidenav-width;
+    & + .layout-main {
+      margin-left: $sidenav-width;
+    }
+
+    &.navbar-right + .layout-main {
+      margin-left: 0;
+      margin-right: $sidenav-width;
+    }
   }
 
-  &.navbar-right + .layout-main {
+  @include media-breakpoint-up(lg) {
-    margin-left: 0;
+    &.navbar-folded + .layout-main {
-    margin-right: $sidenav-width;
+      margin-left: $sidenav-folded-width;
-  }
+    }
 
-  &.navbar-folded + .layout-main {
+    &.navbar-right.navbar-folded + .layout-main {
-    margin-left: $sidenav-folded-width;
+      margin-left: 0;
-  }
+      margin-right: $sidenav-folded-width;
-
+    }
-  &.navbar-right.navbar-folded + .layout-main {
-    margin-left: 0;
-    margin-right: $sidenav-folded-width;
   }
 }