setup

themes/hugo-theme-monochrome/assets/js/header.js

@@ -0,0 +1,46 @@
+function hide_canvas() {
+    const sidebar_canvas_overlay = document.getElementById("sidebar_canvas_overlay");
+    sidebar_canvas_overlay.classList.add("hidden");
+}
+
+function show_canvas() {
+    const sidebar_canvas_overlay = document.getElementById("sidebar_canvas_overlay");
+    sidebar_canvas_overlay.classList.remove("hidden");
+}
+
+function hide_sidebar() {
+    const sidebar = document.getElementById("sidebar");
+    sidebar.classList.add("close");
+}
+
+function show_sidebar() {
+    const sidebar = document.getElementById("sidebar");
+    sidebar.classList.remove("close");
+}
+
+window.addEventListener("DOMContentLoaded", function() {
+    const sidebar_btn = document.getElementById("sidebar_btn");
+    sidebar_btn.addEventListener("click", function() {
+        show_canvas();
+        show_sidebar();
+    });
+
+    const sidebar_canvas_overlay = document.getElementById("sidebar_canvas_overlay");
+    sidebar_canvas_overlay.addEventListener("click", function() {
+        hide_canvas();
+        hide_sidebar();
+    });
+
+    const dark_mode_btn = document.getElementById("dark_mode_btn");
+    const light_mode_btn = document.getElementById("light_mode_btn");
+
+    dark_mode_btn.addEventListener('click', function() {
+        document.documentElement.setAttribute("data-theme", "dark");
+        localStorage.theme = 'dark';
+    });
+
+    light_mode_btn.addEventListener('click', function() {
+        document.documentElement.setAttribute("data-theme", "light");
+        localStorage.theme = 'light';
+    });
+});