layout missing options

js/demo.js

@@ -30,11 +30,13 @@ class TablerDemo {
   getConfig = function () {
     return {
       colorScheme: (localStorage.getItem('tablerColorScheme')) ? localStorage.getItem('tablerColorScheme') : 'light',
-      sidebarColor: (localStorage.getItem('tablerSidebarColor')) ? localStorage.getItem('tablerSidebarColor') : 'light',
-      headerColor: (localStorage.getItem('tablerHeaderColor')) ? localStorage.getItem('tablerHeaderColor') : 'light',
       navPosition: (localStorage.getItem('tablerNavPosition')) ? localStorage.getItem('tablerNavPosition') : 'side',
+      headerColor: (localStorage.getItem('tablerHeaderColor')) ? localStorage.getItem('tablerHeaderColor') : 'light',
+      headerFixed: (localStorage.getItem('tablerHeaderFixed')) ? localStorage.getItem('tablerHeaderFixed') : 'default',
+      sidebarColor: (localStorage.getItem('tablerSidebarColor')) ? localStorage.getItem('tablerSidebarColor') : 'dark',
       sidebarSize: (localStorage.getItem('tablerSidebarSize')) ? localStorage.getItem('tablerSidebarSize') : 'default',
-      sidebarPosition: (localStorage.getItem('tablerSidebarPosition')) ? localStorage.getItem('tablerSidebarPosition') : 'left'
+      sidebarPosition: (localStorage.getItem('tablerSidebarPosition')) ? localStorage.getItem('tablerSidebarPosition') : 'left',
+      sidebarFixed: (localStorage.getItem('tablerSidebarFixed')) ? localStorage.getItem('tablerSidebarFixed') : 'fixed',
     };
   };
 
@@ -55,10 +57,12 @@ class TablerDemo {
 
     this.toggleColorScheme(form.querySelector('[name="color-scheme"]:checked').value);
     this.toggleNavPosition(form.querySelector('[name="nav-position"]:checked').value);
-    this.toggleSidebarPosition(form.querySelector('[name="sidebar-position"]:checked').value);
+    this.toggleHeaderColor(form.querySelector('[name="header-color"]:checked').value);
+    this.toggleHeaderFixed(form.querySelector('[name="header-fixed"]:checked').value);
     this.toggleSidebarSize(form.querySelector('[name="sidebar-size"]:checked').value);
     this.toggleSidebarColor(form.querySelector('[name="sidebar-color"]:checked').value);
-    this.toggleHeaderColor(form.querySelector('[name="header-color"]:checked').value);
+    this.toggleSidebarPosition(form.querySelector('[name="sidebar-position"]:checked').value);
+    this.toggleSidebarFixed(form.querySelector('[name="sidebar-fixed"]:checked').value);
   };
 
   initFormControls = function() {
@@ -66,10 +70,12 @@ class TablerDemo {
 
     this.toggleColorScheme(config.colorScheme);
     this.toggleNavPosition(config.navPosition);
+    this.toggleHeaderColor(config.headerColor);
+    this.toggleHeaderFixed(config.headerFixed);
     this.toggleSidebarPosition(config.sidebarPosition);
     this.toggleSidebarSize(config.sidebarSize);
     this.toggleSidebarColor(config.sidebarColor);
-    this.toggleHeaderColor(config.headerColor);
+    this.toggleSidebarFixed(config.sidebarFixed);
   };
 
   setFormValue = function(name, value,) {
@@ -142,6 +148,18 @@ class TablerDemo {
     });
   };
 
+  toggleSidebarFixed(fixed) {
+    return this.setConfig('sidebarFixed', fixed, ['fixed', 'default'], () => {
+      if (fixed === 'fixed') {
+        document.querySelector('.js-sidebar').classList.add('navbar-fixed');
+      } else {
+        document.querySelector('.js-sidebar').classList.remove('navbar-fixed');
+      }
+
+      this.setFormValue('sidebar-fixed', fixed);
+    });
+  };
+
   toggleHeaderColor(color) {
     return this.setConfig('headerColor', color, ['dark', 'light'], () => {
       if (color === 'dark') {
@@ -153,6 +171,18 @@ class TablerDemo {
       this.setFormValue('header-color', color);
     });
   };
+
+  toggleHeaderFixed(fixed) {
+    return this.setConfig('headerFixed', fixed, ['fixed', 'default'], () => {
+      if (fixed === 'fixed') {
+        document.querySelector('.js-header').classList.add('navbar-fixed');
+      } else {
+        document.querySelector('.js-header').classList.remove('navbar-fixed');
+      }
+
+      this.setFormValue('header-fixed', fixed);
+    });
+  };
 }
 
 /*

pages/_data/menu.yml

@@ -62,7 +62,7 @@ changelog:
   label: v1.0
 
 customize:
-  url: #
+  url: customize.html
   title: Customize
   icon: sliders
 

pages/layout.html → pages/customize.html

@@ -18,6 +18,14 @@ title: Layout manager
                   <label class="form-label">Nav position</label>
                   {% include ui/input-selectgroup.html name="nav-position" values="top,side" type="radio" class="w-100p" %}
                </div>
+               <div class="form-group">
+                  <label class="form-label">Header color</label>
+                  {% include ui/input-selectgroup.html name="header-color" values="light,dark" type="radio" class="w-100p" %}
+               </div>
+               <div class="form-group">
+                  <label class="form-label">Header fixed</label>
+                  {% include ui/input-selectgroup.html name="header-fixed" values="fixed,default" type="radio" class="w-100p" %}
+               </div>
                <div class="form-group">
                   <label class="form-label">Sidebar position</label>
                   {% include ui/input-selectgroup.html name="sidebar-position" values="left,right" type="radio" class="w-100p" %}
@@ -31,8 +39,8 @@ title: Layout manager
                   {% include ui/input-selectgroup.html name="sidebar-color" values="light,dark" type="radio" class="w-100p" %}
                </div>
                <div class="form-group">
-                  <label class="form-label">Header color</label>
-                  {% include ui/input-selectgroup.html name="header-color" values="light,dark" type="radio" class="w-100p" %}
+                  <label class="form-label">Sidebar fixed</label>
+                  {% include ui/input-selectgroup.html name="sidebar-fixed" values="fixed,default" type="radio" class="w-100p" %}
                </div>
 
 

pages/layout-header-dark.html

@@ -4,4 +4,3 @@ header-dark: true
 page-title: Dashboard
 ---
 
-{% include_cached layout/homepage.html %}

pages/layout-header-sticky.html

@@ -5,4 +5,3 @@ page-title: Dashboard
 header-sticky: true
 ---
 
-{% include_cached layout/homepage.html %}

pages/layout-navbar-folded.html

@@ -7,4 +7,3 @@ sidenav-folded: true
 sidenav-dark: true
 ---
 
-{% include_cached layout/homepage.html %}

pages/layout-navbar-left.html

@@ -6,4 +6,3 @@ page-title: Dashboard
 sidenav-dark: true
 ---
 
-{% include_cached layout/homepage.html %}

pages/layout-navbar-right.html

@@ -6,4 +6,3 @@ page-title: Dashboard
 sidenav-dark: true
 ---
 
-{% include_cached layout/homepage.html %}

pages/layout-navbar-top.html

@@ -3,4 +3,3 @@ title: Navbar top
 page-title: Dashboard
 ---
 
-{% include_cached layout/homepage.html %}

pages/layout-navbar-white.html

@@ -5,4 +5,3 @@ nav-position: left
 page-title: Dashboard
 ---
 
-{% include_cached layout/homepage.html %}

scss/layout/_navbar.scss

@@ -205,7 +205,7 @@ Sidebar
 /*
 Fixed navbar
  */
-.navbar-fixed {
+.navbar-side {
   position: fixed;
   top: 0;
   bottom: 0;