diff --git a/js/demo.js b/js/demo.js
index 70de37d0fc58a2d57ebf8d93bbf847bd05c4ffff..223b64eed65f72c1c6e98347d9e06cfe45c21a8d 100644
--- a/js/demo.js
+++ b/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);
+ });
+ };
}
/*
diff --git a/pages/_data/menu.yml b/pages/_data/menu.yml
index 9db2dd9c4c6cf5d91527f7db508863a2024a636f..eb1eb2ddac68946cc8d5624eaab724ab1a390bde 100644
--- a/pages/_data/menu.yml
+++ b/pages/_data/menu.yml
@@ -62,7 +62,7 @@ changelog:
label: v1.0
customize:
- url: #
+ url: customize.html
title: Customize
icon: sliders
diff --git a/pages/layout.html b/pages/customize.html
similarity index 79%
rename from pages/layout.html
rename to pages/customize.html
index f23efd3f9ef89ab18bf331b6fdeddcd189808ea4..6a4eff9b2bdeb462b80ec31f4ed0f53d9e238e2a 100644
--- a/pages/layout.html
+++ b/pages/customize.html
@@ -18,6 +18,14 @@ title: Layout manager
{% include ui/input-selectgroup.html name="nav-position" values="top,side" type="radio" class="w-100p" %}
+
+
+ {% include ui/input-selectgroup.html name="header-color" values="light,dark" type="radio" class="w-100p" %}
+
+
+
+ {% include ui/input-selectgroup.html name="header-fixed" values="fixed,default" type="radio" class="w-100p" %}
+
{% 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" %}
-
- {% include ui/input-selectgroup.html name="header-color" values="light,dark" type="radio" class="w-100p" %}
+
+ {% include ui/input-selectgroup.html name="sidebar-fixed" values="fixed,default" type="radio" class="w-100p" %}
diff --git a/pages/layout-header-dark.html b/pages/layout-header-dark.html
index b08bdeb8593d59a2ad00c54412b95468ec4ba0fd..66ec4a66b99e27cdb3c7b86f9bb6ca0d1a7b7f9f 100644
--- a/pages/layout-header-dark.html
+++ b/pages/layout-header-dark.html
@@ -4,4 +4,3 @@ header-dark: true
page-title: Dashboard
---
-{% include_cached layout/homepage.html %}
diff --git a/pages/layout-header-sticky.html b/pages/layout-header-sticky.html
index 760b717cb53c8a7782ebce16d2e01e77485b02c6..0c6b5a40a970de3cf39f7de689073a05d461b099 100644
--- a/pages/layout-header-sticky.html
+++ b/pages/layout-header-sticky.html
@@ -5,4 +5,3 @@ page-title: Dashboard
header-sticky: true
---
-{% include_cached layout/homepage.html %}
diff --git a/pages/layout-navbar-folded.html b/pages/layout-navbar-folded.html
index fec88778f6b0f7329973da502691eeb2be6b944c..49f8511f15cec80a7d5f398d7c749eb2dbf6e23c 100644
--- a/pages/layout-navbar-folded.html
+++ b/pages/layout-navbar-folded.html
@@ -7,4 +7,3 @@ sidenav-folded: true
sidenav-dark: true
---
-{% include_cached layout/homepage.html %}
diff --git a/pages/layout-navbar-left.html b/pages/layout-navbar-left.html
index b75d8734e4728012ec3eb4c97c7afee85d9026e7..3134a4f52c41141c3d90693a91502185c7b5b865 100644
--- a/pages/layout-navbar-left.html
+++ b/pages/layout-navbar-left.html
@@ -6,4 +6,3 @@ page-title: Dashboard
sidenav-dark: true
---
-{% include_cached layout/homepage.html %}
diff --git a/pages/layout-navbar-right.html b/pages/layout-navbar-right.html
index 7e1d67c40eb4f5edc109bcdf1c272aaa5da81fcc..bec9bd4b79b94734f706acb09414d64da114d55e 100644
--- a/pages/layout-navbar-right.html
+++ b/pages/layout-navbar-right.html
@@ -6,4 +6,3 @@ page-title: Dashboard
sidenav-dark: true
---
-{% include_cached layout/homepage.html %}
diff --git a/pages/layout-navbar-top.html b/pages/layout-navbar-top.html
index db86fba5e8050be7fb8f8806dce134ab2b2cd394..dadcb0ca06b064301ad4f7e0f0b154c1a15e1517 100644
--- a/pages/layout-navbar-top.html
+++ b/pages/layout-navbar-top.html
@@ -3,4 +3,3 @@ title: Navbar top
page-title: Dashboard
---
-{% include_cached layout/homepage.html %}
diff --git a/pages/layout-navbar-white.html b/pages/layout-navbar-white.html
index 87f247233e0d2d166de16461069add1878001692..3f3efb2b47f139f7a5915f0de382e1543287df9f 100644
--- a/pages/layout-navbar-white.html
+++ b/pages/layout-navbar-white.html
@@ -5,4 +5,3 @@ nav-position: left
page-title: Dashboard
---
-{% include_cached layout/homepage.html %}
diff --git a/scss/layout/_navbar.scss b/scss/layout/_navbar.scss
index cb671f596edeb535407f06ad541d4f3511d46028..ab85e6e8749000ecead9647551a169f3e742a673 100644
--- a/scss/layout/_navbar.scss
+++ b/scss/layout/_navbar.scss
@@ -205,7 +205,7 @@ Sidebar
/*
Fixed navbar
*/
-.navbar-fixed {
+.navbar-side {
position: fixed;
top: 0;
bottom: 0;