From 6844bc38701bf945d902df0a7815c8a817e23da4 Mon Sep 17 00:00:00 2001
From: Benjamin Michaelis <git@relay.benjamin.michaelis.net>
Date: Fri, 14 Feb 2025 15:01:50 -0800
Subject: [PATCH] feat: Remember Sidebar state

---
 .../Views/Shared/_Layout.cshtml               |  2 +-
 EssentialCSharp.Web/wwwroot/js/site.js        | 34 +++++++++++++------
 2 files changed, 24 insertions(+), 12 deletions(-)

diff --git a/EssentialCSharp.Web/Views/Shared/_Layout.cshtml b/EssentialCSharp.Web/Views/Shared/_Layout.cshtml
index 7b4ebbc0..a54370da 100644
--- a/EssentialCSharp.Web/Views/Shared/_Layout.cshtml
+++ b/EssentialCSharp.Web/Views/Shared/_Layout.cshtml
@@ -95,7 +95,7 @@
             <header class="header-background">
                 <div class="banner d-flex justify-content-between">
                     <div class="d-flex align-items-center menu-position">
-                        <button class="menu-btn has-tooltip" v-on:click="sidebarShown = !sidebarShown">
+                        <button class="menu-btn has-tooltip" v-on:click="toggleSidebar">
                             <i class="fa fa-bars fa-lg icon-light"></i>
                             <span class="tooltip-text sidebar-tooltip-text">
                                 <b>Ctrl + M</b>
diff --git a/EssentialCSharp.Web/wwwroot/js/site.js b/EssentialCSharp.Web/wwwroot/js/site.js
index a3e95e07..70692e24 100644
--- a/EssentialCSharp.Web/wwwroot/js/site.js
+++ b/EssentialCSharp.Web/wwwroot/js/site.js
@@ -179,16 +179,21 @@ const app = createApp({
             }
 
             if (e.code == "KeyM" && e.ctrlKey) {
-                sidebarShown.value = !sidebarShown.value;
+                toggleSidebar();
             }
         });
 
-        const sidebarShown = ref(false);
+        const sidebarShown = ref(localStorage.getItem('sidebarShown'));
 
         const smallScreen = computed(() => {
             return (windowWidth.value || 0) < smallScreenSize;
         });
 
+        function toggleSidebar() {
+            sidebarShown.value = !sidebarShown.value;
+            localStorage.setItem('sidebarShown', sidebarShown.value);
+        }
+
         /** @type {import("vue").Ref<"toc" | "search">} */
         const sidebarTab = ref("toc");
 
@@ -207,13 +212,16 @@ const app = createApp({
         watch(windowWidth, (newWidth, oldWidth) => {
             //+ 50 so that the side bar diappears before the css media class changes the sidebar to take
             // over the full screen
-            if (newWidth < smallScreenSize) {
-                sidebarShown.value = false;
-            }
-            // when making screen bigger reveal sidebar
-            else {
-                if (!sidebarShown.value) {
-                    sidebarShown.value = true;
+            // If a setting is set in storage already, follow that
+            if (sidebarShown.value === null) {
+                if (newWidth < smallScreenSize) {
+                    sidebarShown.value = false;
+                }
+                // when making screen bigger reveal sidebar
+                else {
+                    if (!sidebarShown.value) {
+                        sidebarShown.value = true;
+                    }
                 }
             }
         });
@@ -230,8 +238,11 @@ const app = createApp({
         });
 
         onMounted(() => {
-            if (windowWidth.value > smallScreenSize) {
-                sidebarShown.value = true;
+            // If a setting is set in storage already, follow that
+            if (sidebarShown.value === null) {
+                if (windowWidth.value > smallScreenSize) {
+                    sidebarShown.value = true;
+                }
             }
 
             // Scroll the current selected page in the TOC into view of the TOC.
@@ -304,6 +315,7 @@ const app = createApp({
 
             sidebarShown,
             sidebarTab,
+            toggleSidebar,
 
             smallScreen,