Added hide/show for menu

layouts/partials/docs/inject/toc-before.html

@@ -0,0 +1 @@
+<u><h3>TableOfContents</h3></u>

layouts/partials/docs/menu.html

@@ -4,25 +4,67 @@
 
   <div class="book-menu-top">
   {{ partial "docs/inject/menu-before" . }}
-  {{ partial "docs/menu-hugo" .Site.Menus.before }}
+  <h4><u>{{ partial "docs/menu-hugo" .Site.Menus.before }}</u></h4>
   </div>
 
   <div class="book-menu-mid">
-  {{ if .Site.Params.BookMenuBundle }}
+    <!-- Portfolio Section -->
-    {{ partial "docs/menu-bundle" . }}
+    <div class="menu-section">
-  {{ else }}
+      <h4 class="toggle-section" data-target="portfolio-section">
-    {{ partial "docs/menu-filetree" . }}
+        <u>portfolio</u> <span class="arrow">▼</span>
-  {{ end }}
+      </h4>
+      <div id="portfolio-section" class="section-content">
+        {{ if .Site.Params.BookMenuBundle }}
+          {{ partial "docs/menu-bundle" . }}
+        {{ else }}
+          {{ partial "docs/menu-filetree" . }}
+        {{ end }}
+      </div>
+    </div>
+
+    <!-- Writing Section -->
+    <div class="menu-section">
+      <h4 class="toggle-section" data-target="writing-section">
+        <u>writing</u> <span class="arrow">▼</span>
+      </h4>
+      <div id="writing-section" class="section-content">
+        {{ partial "docs/menu-hugo" .Site.Menus.after }}
+      </div>
+    </div>
   </div>
 
+
   <div class="book-menu-bot">
     {{ partial "docs/inject/menu-after" . }}
-    {{ partial "docs/menu-hugo" .Site.Menus.after }}
+    {{ partial "docs/menu-hugo" .Site.Menus.contact }}
   </div>
 </nav>
 
 <!-- Restore menu position as soon as possible to avoid flickering -->
 {{ $script := resources.Get "menu-reset.js" | resources.Minify }}
+<!---->
 {{ with $script.Content }}
   <script>{{ . | safeJS }}</script>
+  <script>
+  document.addEventListener("DOMContentLoaded", () => {
+    const toggleSections = document.querySelectorAll(".toggle-section");
+
+    toggleSections.forEach((toggle) => {
+      toggle.addEventListener("click", () => {
+        const targetId = toggle.getAttribute("data-target");
+        const section = document.getElementById(targetId);
+        const arrow = toggle.querySelector(".arrow");
+
+        if (section.classList.contains("open")) {
+          section.classList.remove("open");
+          arrow.classList.remove("up");
+        } else {
+          section.classList.add("open");
+          arrow.classList.add("up");
+        }
+      });
+    });
+  });
+</script>
+
 {{ end }}