From b38e53b64e7ce1359edb8236e4e8cf064b27fb90 Mon Sep 17 00:00:00 2001 From: Syndamia Date: Wed, 4 Jan 2023 20:05:17 +0200 Subject: [expands-navbar] State of navbar is now stored in local storage on large screens --- src/_header.html | 2 +- src/regarding-js.md | 3 ++- src/scripts/expand-navbar.js | 14 +++++++++----- 3 files changed, 12 insertions(+), 7 deletions(-) (limited to 'src') diff --git a/src/_header.html b/src/_header.html index cba7fc0..d2873af 100644 --- a/src/_header.html +++ b/src/_header.html @@ -28,7 +28,7 @@ Home Expand navbar - + Content diff --git a/src/regarding-js.md b/src/regarding-js.md index 25bae91..e1b7fac 100644 --- a/src/regarding-js.md +++ b/src/regarding-js.md @@ -14,7 +14,7 @@ Any user data that might be saved isn't, and never will be, used for purposes no |[theme-changer.js](/scripts/theme-changer.js)|Change theme between light and dark (split in two files)|[Link](https://gitlab.com/Syndamia/syndamiadotcom/-/tree/master/src/scripts/theme-changer.js)|484B|19| |[js-styling-preload.js](/scripts/js-styling-preload.js)|Show hidden elements (used solely by scripts) as soon as possible|[Link](https://gitlab.com/Syndamia/syndamiadotcom/-/tree/master/src/scripts/js-styling-preload.js)|81B|3| |[page-width.js](/scripts/page-width.js)|Change whether text covers the whole width of the page or only the middle (applicable to wide screens)|[Link](https://gitlab.com/Syndamia/syndamiadotcom/-/tree/master/src/scripts/page-width.js)|597B|20| -|[expand-navbar.js](/scripts/expand-navbar.js)|On small screens, shrinks and expands the sidebar navbar|[Link](https://gitlab.com/Syndamia/syndamiadotcom/-/tree/master/src/scripts/expand-navbar.js)|488B|16| +|[expand-navbar.js](/scripts/expand-navbar.js)|Button to shrink and expand the sidebar|[Link](https://gitlab.com/Syndamia/syndamiadotcom/-/tree/master/src/scripts/expand-navbar.js)|669B|20| |[presentation.js](/scripts/presentation.js)|Adds presentation styles and is used for presentation navbar|[Link](https://gitlab.com/Syndamia/syndamiadotcom/-/tree/master/src/scripts/presentation.js)|1.4KB|55| ## Data in browser storage @@ -27,5 +27,6 @@ Any user data that might be saved isn't, and never will be, used for purposes no |---|---|---| |`theme`|`dark`\|`light`|Saves which theme should be loaded| |`width`|`norm`\|`wide`|Saves in which width pages should be shown| +|`navbar`|`norm`\|`hidden`|Saves whether the navbar should be expanded or shrunk|

diff --git a/src/scripts/expand-navbar.js b/src/scripts/expand-navbar.js index a59a13f..a28a98c 100644 --- a/src/scripts/expand-navbar.js +++ b/src/scripts/expand-navbar.js @@ -1,16 +1,20 @@ const expandBtn = document.getElementById('expandNavbarBtn'); const sidebarElem = document.getElementsByClassName('sidebar')[0]; -expandBtn.classList.remove('hidden'); -sidebarElem.classList.add('sidebar-hidden'); +if (localStorage.getItem('navbar') === 'hidden') { + expandBtn.src = '/img/layout-navbar-expand-tabler.svg'; + sidebarElem.classList.add('sidebar-hidden'); +} expandBtn.onclick = function() { sidebarElem.classList.toggle('sidebar-hidden'); - if (sidebarElem.classList.contains('sidebar-hidden')) { - expandBtn.src = '/img/layout-navbar-expand-tabler.svg'; + if (localStorage.getItem('navbar') !== 'norm') { + expandBtn.src = '/img/layout-navbar-collapse-tabler.svg'; + if (window.innerWidth > 610) localStorage.setItem('navbar', 'norm'); } else { - expandBtn.src = '/img/layout-navbar-collapse-tabler.svg'; + expandBtn.src = '/img/layout-navbar-expand-tabler.svg'; + localStorage.setItem('navbar', 'hidden'); } } -- cgit v1.3.1-23-gd82d