From 6ba034bc4d00bb5a3c1e2d88cebec1c90a29ccd8 Mon Sep 17 00:00:00 2001
From: codecalm <codecalm@gmail.com>
Date: Mon, 8 Jul 2019 20:23:17 +0200
Subject: [PATCH] layout manager localstorage config

---
 js/app/demo.js                 | 68 ++++++++++++++++++++++++++++++++++
 js/app/layout-manager.js       | 19 ----------
 pages/_data/menu.yml           |  4 ++
 pages/_includes/layout/js.html |  2 +-
 pages/_layouts/default.html    |  4 --
 scss/layout/_navbar.scss       |  2 +
 6 files changed, 75 insertions(+), 24 deletions(-)
 create mode 100644 js/app/demo.js
 delete mode 100644 js/app/layout-manager.js

diff --git a/js/app/demo.js b/js/app/demo.js
new file mode 100644
index 00000000..418da4ca
--- /dev/null
+++ b/js/app/demo.js
@@ -0,0 +1,68 @@
+'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);
+  }
+});
diff --git a/js/app/layout-manager.js b/js/app/layout-manager.js
deleted file mode 100644
index 82fadee5..00000000
--- a/js/app/layout-manager.js
+++ /dev/null
@@ -1,19 +0,0 @@
-'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();
-});
diff --git a/pages/_data/menu.yml b/pages/_data/menu.yml
index 3961c897..9db2dd9c 100644
--- a/pages/_data/menu.yml
+++ b/pages/_data/menu.yml
@@ -61,4 +61,8 @@ changelog:
   icon: file-plus
   label: v1.0
 
+customize:
+  url: #
+  title: Customize
+  icon: sliders
 
diff --git a/pages/_includes/layout/js.html b/pages/_includes/layout/js.html
index 9ff61a6b..4b36f958 100644
--- a/pages/_includes/layout/js.html
+++ b/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 || {};
diff --git a/pages/_layouts/default.html b/pages/_layouts/default.html
index 287d620c..f174644e 100644
--- a/pages/_layouts/default.html
+++ b/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 %}-->
diff --git a/scss/layout/_navbar.scss b/scss/layout/_navbar.scss
index 280cd81c..0f4c2c8c 100644
--- a/scss/layout/_navbar.scss
+++ b/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;
-- 
GitLab