Implemented javascript functionality for hiding and unhiding the sidebar on small screens and updated sidebar scalability

7 files changed, 197 insertions, 49 deletions

diff --git a/src/_header.html b/src/_header.html
index e37a394..051c895 100644
--- a/src/_header.html
+++ b/src/_header.html
@@ -27,19 +27,21 @@
 	<nav class="sidebar">
 		<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"></script>
 		</span>
 
-		Content
+		<span>Content</span>
 		<div class="arrowed-list">
 			<a href="/blog">Blog</a>
 			<a href="/tutorials">Tutorials</a>
 			<a href="/reposts">Reposts</a>
 		</div>
-		Public services
+		<span>Public services</span>
 		<div class="arrowed-list">
 			<a href="/archives">Archives</a>
 		</div>
-		My Work
+		<span>My Work</span>
 		<div class="arrowed-list">
 			<a href="/assets">Assets</a>
 			<a href="/software">Software</a>
diff --git a/src/hide-js-styling.css b/src/hide-js-styling.css
index e0928b7..e1177f4 100644
--- a/src/hide-js-styling.css
+++ b/src/hide-js-styling.css
@@ -1,3 +1,3 @@
-#settingsWrapper, #scrollBtn {
+#settingsWrapper, #scrollBtn, #expandNavbarBtn {
   display: none;
 }
diff --git a/src/img/layout-navbar-collapse-tabler.svg b/src/img/layout-navbar-collapse-tabler.svg
new file mode 100644
index 0000000..49e8966
--- /dev/null
+++ b/src/img/layout-navbar-collapse-tabler.svg
@@ -0,0 +1,57 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   class="icon icon-tabler icon-tabler-layout-navbar-collapse"
+   width="24"
+   height="24"
+   viewBox="0 0 24 24"
+   stroke-width="2"
+   stroke="currentColor"
+   fill="none"
+   stroke-linecap="round"
+   stroke-linejoin="round"
+   version="1.1"
+   id="svg10"
+   sodipodi:docname="layout-navbar-collapse-tabler.svg"
+   inkscape:version="1.1.2 (0a00cf5339, 2022-02-04)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs14" />
+  <sodipodi:namedview
+     id="namedview12"
+     pagecolor="#505050"
+     bordercolor="#eeeeee"
+     borderopacity="1"
+     inkscape:pageshadow="0"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="0"
+     showgrid="false"
+     inkscape:zoom="37.125"
+     inkscape:cx="12.013468"
+     inkscape:cy="12.013468"
+     inkscape:window-width="1920"
+     inkscape:window-height="1053"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg10" />
+  <path
+     stroke="none"
+     d="M0 0h24v24H0z"
+     fill="none"
+     id="path2" />
+  <path
+     d="M 4,18 V 6 A 2,2 0 0 1 6,4 h 12 a 2,2 0 0 1 2,2 v 12 a 2,2 0 0 1 -2,2 H 6 A 2,2 0 0 1 4,18 Z"
+     id="path4"
+     style="stroke:#ffeede" />
+  <path
+     d="M 4,9 H 20"
+     id="path6"
+     style="stroke:#ffeede" />
+  <path
+     d="m 10,16 2,-2 2,2"
+     id="path8"
+     style="stroke:#ffeede" />
+</svg>
diff --git a/src/img/layout-navbar-expand-tabler.svg b/src/img/layout-navbar-expand-tabler.svg
new file mode 100644
index 0000000..61b845d
--- /dev/null
+++ b/src/img/layout-navbar-expand-tabler.svg
@@ -0,0 +1,57 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   class="icon icon-tabler icon-tabler-layout-navbar-expand"
+   width="24"
+   height="24"
+   viewBox="0 0 24 24"
+   stroke-width="2"
+   stroke="currentColor"
+   fill="none"
+   stroke-linecap="round"
+   stroke-linejoin="round"
+   version="1.1"
+   id="svg10"
+   sodipodi:docname="layout-navbar-expand-tabler.svg"
+   inkscape:version="1.1.2 (0a00cf5339, 2022-02-04)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs14" />
+  <sodipodi:namedview
+     id="namedview12"
+     pagecolor="#505050"
+     bordercolor="#eeeeee"
+     borderopacity="1"
+     inkscape:pageshadow="0"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="0"
+     showgrid="false"
+     inkscape:zoom="37.125"
+     inkscape:cx="12.013468"
+     inkscape:cy="12.013468"
+     inkscape:window-width="1920"
+     inkscape:window-height="1053"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg10" />
+  <path
+     stroke="none"
+     d="M0 0h24v24H0z"
+     fill="none"
+     id="path2" />
+  <path
+     d="M 4,18 V 6 A 2,2 0 0 1 6,4 h 12 a 2,2 0 0 1 2,2 v 12 a 2,2 0 0 1 -2,2 H 6 A 2,2 0 0 1 4,18 Z"
+     id="path4"
+     style="stroke:#ffeede" />
+  <path
+     d="M 4,9 H 20"
+     id="path6"
+     style="stroke:#ffeede" />
+  <path
+     d="m 10,14 2,2 2,-2"
+     id="path8"
+     style="stroke:#ffeede" />
+</svg>
diff --git a/src/regarding-js.md b/src/regarding-js.md
index 52a9b35..ccf8b7c 100644
--- a/src/regarding-js.md
+++ b/src/regarding-js.md
@@ -15,6 +15,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, srinks and expands the sidebar navbar|[Link](https://gitlab.com/Syndamia/syndamiadotcom/-/tree/master/src/scripts/expand-navbar.js)|488B|16|
 
 ## Data in browser storage
 [![🔗](/img/link-tabler.svg)](#data-in-browser-storage)
diff --git a/src/scripts/expand-navbar.js b/src/scripts/expand-navbar.js
new file mode 100644
index 0000000..a59a13f
--- /dev/null
+++ b/src/scripts/expand-navbar.js
@@ -0,0 +1,16 @@
+const expandBtn = document.getElementById('expandNavbarBtn');
+const sidebarElem = document.getElementsByClassName('sidebar')[0];
+
+expandBtn.classList.remove('hidden');
+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';
+	}
+	else {
+		expandBtn.src = '/img/layout-navbar-collapse-tabler.svg';
+	}
+}
diff --git a/src/styles.css b/src/styles.css
index 66e2242..02f6a75 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -348,7 +348,7 @@ dd code {
 }
 
 .sidebar {
-  width: 11.2em;
+  max-width: 11.2em;
   display: flex;
   flex-direction: column;
   text-align: left;
@@ -434,6 +434,12 @@ dd code {
   margin-block-end: calc(1em + 10px);
 }
 
+/* Script-specific styling */
+
+#expandNavbarBtn {
+  display: none;
+}
+
 /* Small screen support */
 
 @media screen and (max-width: 610px) {
@@ -442,13 +448,17 @@ dd code {
   }
 
   #content-wrapper {
-    flex-direction: column-reverse;
+    flex-direction: column;
   }
 
   .sidebar {
     min-height: auto;
   }
 
+  .sidebar-hidden > :not(.header) {
+    display: none;
+  }
+
   #index-contents {
     display: initial;
   }
@@ -465,6 +475,54 @@ dd code {
   table td, table th {
     word-break: break-all;
   }
+
+  #expandNavbarBtn {
+    display: initial;
+    margin-left: 1.4em;
+  }
+}
+
+/* Script specific styling */
+
+.btn:hover {
+  cursor: pointer;
+}
+
+.clicked-image {
+  position: absolute;
+  width: 100vw;
+  height: 100vh;
+  max-width: none !important;
+  max-height: none !important;
+  border: none;
+  object-fit: contain;
+  left: 0;
+  top: 0;
+  padding: 1em;
+  z-index: 2;
+  background-color: var(--bg-color);
+}
+
+.body-on-clicked-image {
+  overflow: hidden;
+}
+
+#scrollBtn {
+  font-size: 1rem;
+  position: fixed;
+  right: 1em;
+  bottom: 1em;
+  z-index: 1;
+  border: 1px solid;
+  transition-duration: 0.5s;
+  padding: 0.3em;
+
+  display: none;
+}
+
+.setting-btn {
+  vertical-align: middle;
+  border: none !important;
 }
 
 /* File tables */
@@ -544,49 +602,6 @@ dd code {
   color: #afaf00;
 }
 
-/* Script specific styling */
-
-.btn:hover {
-  cursor: pointer;
-}
-
-.clicked-image {
-  position: absolute;
-  width: 100vw;
-  height: 100vh;
-  max-width: none !important;
-  max-height: none !important;
-  border: none;
-  object-fit: contain;
-  left: 0;
-  top: 0;
-  padding: 1em;
-  z-index: 2;
-  background-color: var(--bg-color);
-}
-
-.body-on-clicked-image {
-  overflow: hidden;
-}
-
-#scrollBtn {
-  font-size: 1rem;
-  position: fixed;
-  right: 1em;
-  bottom: 1em;
-  z-index: 1;
-  border: 1px solid;
-  transition-duration: 0.5s;
-  padding: 0.3em;
-
-  display: none;
-}
-
-.setting-btn {
-  vertical-align: middle;
-  border: none !important;
-}
-
 /* OpenSans font */
 
 @font-face {