feat: add collapsible sections to bundle menu (#53)

* feat: add collapsible sections to bundle menu

* remove isParent check

exampleSite/config.yaml

@@ -20,6 +20,7 @@ markup:
     endLevel: 9
 
 params:
+  geekdocMenuBundle: true
   geekdocToC: 3
 
   geekdocRepo: https://github.com/thegeeklab/hugo-geekdoc

exampleSite/content/toc-tree/level-1/_index.md

@@ -1,3 +1,7 @@
+---
+geekdocCollapseSection: true
+---
+
 Level 1
 
 <!-- spellchecker-disable -->

exampleSite/data/menu/main.yaml

@@ -0,0 +1,21 @@
+---
+main:
+  - name: Level 1
+    ref: "/toc-tree/level-1"
+    sub:
+      - name: Level 1.1
+        ref: "/toc-tree/level-1/level-1-1"
+      - name: Level 1.2
+        ref: "/toc-tree/level-1/level-1-2"
+      - name: Level 1.3
+        ref: "/toc-tree/level-1/level-1-3"
+        sub:
+          - name: Level 1.3.1
+            ref: "/toc-tree/level-1/level-1-3/level-1-3-1"
+  - name: Level 2
+    ref: "/toc-tree/level-2"
+    sub:
+      - name: Level 2.1
+        ref: "/toc-tree/level-2/level-2-1"
+      - name: Level 2.2
+        ref: "/toc-tree/level-2/level-2-2"

layouts/partials/menu-bundle.html

@@ -1,6 +1,7 @@
 {{ $current := .current }}
 {{ template "menu-file" dict "sect" .source "current" $current "site" $current.Site }}
 
+<!-- template -->
 {{ define "menu-file" }}
 {{ $current := .current }}
 {{ $site := .site }}
@@ -17,23 +18,34 @@
             {{ $this := $site.GetPage .ref }}
             {{ $current := $current.Scratch.Get "current" }}
             {{ $icon := default false .icon }}
+            {{ $numberOfPages := (add (len $this.Pages) (len $this.Sections)) }}
+            {{ $isCurrent := eq $current $this }}
+            {{ $isAncestor := $this.IsAncestor $current }}
+            {{ $id := substr (sha1 $this.Permalink) 0 8 }}
+            {{ $hasCollapse := and $this.Params.GeekdocCollapseSection (isset . "sub") }}
 
+            {{ if $hasCollapse }}
+            <input type="checkbox" id="{{ printf "navtree-%s" $id }}" class="gdoc-nav__toggle" {{ if or $isCurrent $isAncestor }}checked{{ end }}>
+            <label for="{{ printf "navtree-%s" $id }}" class="flex justify-between">
+            {{ end }}
             <span class="flex">
                 {{ if $icon }}<svg class="icon {{ .icon }}"><use xlink:href="#{{ .icon }}"></use></svg>{{ end }}
                 <a href="{{ if .external }}{{ .ref }}{{ else }}{{ relref $current .ref }}{{ end }}"
-                    class="gdoc-nav__entry {{ if not .external }}{{ if eq $current $this }}is-active{{ end }}{{ end }}">
+                    class="gdoc-nav__entry {{ if not .external }}{{ if $isCurrent }}is-active{{ end }}{{ end }}">
                     {{ .name }}
                 </a>
             </span>
+            {{ if $hasCollapse }}
+            <svg class="icon keyborad_arrow_left"><use xlink:href="#keyborad_arrow_left"></use></svg>
+            <svg class="icon keyborad_arrow_down hidden"><use xlink:href="#keyborad_arrow_down"></use></svg>
+            </label>
+            {{ end }}
         {{ else }}
-            <span class="flex">
+            <span class="flex">{{ .name }}</span>
-                {{ .name }}
-            </span>
         {{ end }}
 
-        {{ $sub := default false .sub }}
+        {{ with .sub }}
-        {{ if $sub }}
+            {{ template "menu-file" dict "sect" . "current" ($current.Scratch.Get "current") "site" ($current.Scratch.Get "site") }}
-            {{ template "menu-file" dict "sect" $sub "current" ($current.Scratch.Get "current") "site" ($current.Scratch.Get "site") }}
         {{ end }}
     </li>
 

layouts/partials/menu-filetree.html

@@ -15,9 +15,10 @@
             {{ $isCurrent := eq $current . }}
             {{ $isAncestor := .IsAncestor $current }}
             {{ $id := substr (sha1 .Permalink) 0 8 }}
+            {{ $hasCollapse := and $isParent .Params.GeekdocCollapseSection }}
 
             <li>
-            {{ if and $isParent .Params.GeekdocCollapseSection }}
+            {{ if $hasCollapse }}
             <input type="checkbox" id="{{ printf "navtree-%s" $id }}" class="gdoc-nav__toggle" {{ if or $isCurrent $isAncestor }}checked{{ end }}>
             <label for="{{ printf "navtree-%s" $id }}" class="flex justify-between">
             {{ end }}
@@ -30,7 +31,7 @@
             {{ else }}
                 <span class="flex">{{ partial "title" . }}</span>
             {{ end }}
-            {{ if and $isParent .Params.GeekdocCollapseSection }}
+            {{ if $hasCollapse }}
                 <svg class="icon keyborad_arrow_left"><use xlink:href="#keyborad_arrow_left"></use></svg>
                 <svg class="icon keyborad_arrow_down hidden"><use xlink:href="#keyborad_arrow_down"></use></svg>
             </label>