layout manager localstorage config

js/app/demo.js

+'use strict';
+
+class TablerDemo {
+  constructor() {
+    this.init();
+  };
+
+  init() {
+    this.config = this.getConfig();
+
+    console.log('config', this.config);
+  };
+
+  getConfig = function () {
+    return {
+      colorScheme: (localStorage.getItem('tablerColorScheme')) ? localStorage.getItem('tablerColorScheme') : 'light',
+      navPosition: (localStorage.getItem('tablerNavPosition')) ? localStorage.getItem('tablerNavPosition') : 'side',
+      sidebarColor: (localStorage.getItem('tablerSidebarColor')) ? localStorage.getItem('tablerSidebarColor') : 'light',
+      sidebarSize: (localStorage.getItem('tablerSidebarSize')) ? localStorage.getItem('tablerSidebarSize') : 'default',
+      sidebarPosition: (localStorage.getItem('tablerSidebarPosition')) ? localStorage.getItem('tablerSidebarPosition') : 'left'
+    };
+  };
+
+  setConfig = function (key, value, availableValues) {
+    if (availableValues && availableValues.indexOf(value) !== -1) {
+      key = 'tabler' + key.charAt(0).toUpperCase() + key.slice(1);
+
+      localStorage.setItem(key, value);
+    }
+
+    return this.getConfig();
+  };
+
+  renderManagerHtml(elem) {
+    elem.innerHTML = 'test2';
+  };
+
+  toggleColorScheme(colorScheme) {
+    return this.setConfig('colorScheme', colorScheme, ['dark', 'light']);
+  };
+
+  toggleNavPosition(position) {
+    return this.setConfig('navPosition', position, ['top', 'side']);
+  };
+
+  toggleSidebarPosition(position) {
+    return this.setConfig('sidebarPosition', position, ['left', 'right']);
+  };
+
+  toggleSidebarSize(size) {
+    return this.setConfig('sidebarSize', size, ['default', 'folded']);
+  };
+
+  toggleSidebarColor(color) {
+    return this.setConfig('sidebarColor', color, ['dark', 'light']);
+  };
+}
+
+const demo = new TablerDemo();
+window.DEMO = demo;
+
+document.addEventListener("DOMContentLoaded", function () {
+  let  elem = document.getElementById('layout-manager');
+
+  if (elem) {
+    demo.renderManagerHtml(elem);
+  }
+});

js/app/layout-manager.js

-'use strict';
-
-class TablerLayoutManager {
-  static init() {
-    this.elem = document.getElementById('layout-manager');
-
-    if(this.elem) {
-      this.renderHtml();
-    }
-  }
-
-  static renderHtml() {
-    this.elem.innerHTML = 'test';
-  }
-}
-
-document.addEventListener("DOMContentLoaded", function() {
-  TablerLayoutManager.init();
-});

pages/_data/menu.yml

@@ -61,4 +61,8 @@ changelog:
   icon: file-plus
   label: v1.0
 
+customize:
+  url: #
+  title: Customize
+  icon: sliders
 

pages/_includes/layout/js.html

@@ -10,7 +10,7 @@
 
 <script src="{{ site.base }}/js/tabler.js"></script>
 <script src="{{ site.base }}/js/app/charts.js"></script>
-<script src="{{ site.base }}/js/app/layout-manager.js"></script>
+<script src="{{ site.base }}/js/app/demo.js"></script>
 
 <script>
    window.tabler = window.tabler || {};

pages/_layouts/default.html

@@ -3,20 +3,16 @@ layout: base
 ---
 
 <div class="d-flex flex-row">
-   {% if page.nav-position == "left" or page.nav-position == "right" %}
    {% include layout/sidenav.html dark=page.sidenav-dark folded=page.sidenav-folded fixed=true %}
-   {% endif %}
 
    <div class="layout-main d-flex flex-column flex-fill max-w-full">
       {% include layout/topnav.html dark=page.header-dark sticky=page.header-sticky %}
 
-      {% if page.nav-position == "top" or page.nav-position == "all" %}
       <div class="d-none d-lg-flex navbar navbar-expand-md">
          <div class="container">
             {% include layout/menu.html top=true %}
          </div>
       </div>
-      {% endif %}
 
       <main class="container{% if page.container-size %} container-{{ page.container-size }}{% endif %}{% if page.fluid %}-fluid{% endif %} my-4">
          <!--{% include layout/page-title.html %}-->

scss/layout/_navbar.scss

@@ -124,6 +124,8 @@ Sidebar
   margin: 0;
   pointer-events: inherit;
   justify-content: start;
+  flex-wrap: nowrap;
+  overflow: auto;
 
   .nav {
     flex-direction: column;