home/layouts/partials/docs/menu.html

<nav>
  {{ partial "docs/brand" . }}
  {{ partial "docs/search" . }}

  <div class="book-menu-top">
  {{ partial "docs/inject/menu-before" . }}
  <h4><u>{{ partial "docs/menu-hugo" .Site.Menus.before }}</u></h4>
  </div>

  <div class="book-menu-mid">
    <!-- Portfolio Section -->
    <div class="menu-section">
      <h4 class="toggle-section" data-target="portfolio-section">
        <u>portfolio</u> <span class="arrow">▼</span>
      </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.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 }}