[expands-navbar] State of navbar is now stored in local storage on large screens

3 files changed, 12 insertions, 7 deletions

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 @@
 		<span class="header">
 			<a href="/">Home</a>
 			<img id="expandNavbarBtn" class="unzoomable btn setting-btn icon" src="/img/layout-navbar-expand-tabler.svg" alt="Expand navbar">
-			<script type="text/javascript" src="/scripts/expand-navbar.js" integrity="sha512-jWOVi/r00B5Xz+tdInmC5M7lS/wZhLDe15kysVb11+M8xi3+lsQNy/rOUqGuAxV9Hnf6E5ZVNsnzJrlPGrWvyQ==" crossorigin="anonymous" defer></script>
+			<script type="text/javascript" src="/scripts/expand-navbar.js" integrity="sha512-ZQZXaf8Bk9lHiX9HzsiW8eO/2aYrOpZABk20QUQjrw90qsF5/dIpjeLrtPtTxAOQ9CuFA5m1m5qsG8DZEICPBw==" crossorigin="anonymous" defer></script>
 		</span>
 
 		<span>Content</span>
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|
 
 <p></p>
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');
 	}
 }