Merge pull request #23 from thegeeklab/collapse-section

add new page parameter GeekdocCollapseSection

.drone.yml

@@ -31,7 +31,7 @@ steps:
 - name: link-validation
   image: thegeeklab/link-validator
   commands:
-  - link-validator -ro
+  - link-validator -ro --exclude "https://github.com/thegeeklab/hugo-geekdoc/edit/master/*"
   environment:
     LINK_VALIDATOR_BASE_DIR: exampleSite/public
 
@@ -242,6 +242,6 @@ depends_on:
 
 ---
 kind: signature
-hmac: 9ffa1706ed0a3368bafa619e2fe5dd07db1813c9c8f9e7b54a3f4e722393ffce
+hmac: c9b760d5d37c992b0caba32b3a4cf1933174c63453f263b96abec8387d340dd7
 
 ...

exampleSite/content/collapse/_index.md

@@ -0,0 +1,6 @@
+---
+title: Collapse
+geekdocCollapseSection: true
+---
+
+Demo collapsible menu entries.

exampleSite/content/collapse/level-1/_index.md

@@ -0,0 +1,7 @@
+Level 1
+
+<!-- spellchecker-disable -->
+
+{{< toc-tree >}}
+
+<!-- spellchecker-enable -->

exampleSite/content/collapse/level-1/level-1-1.md

@@ -0,0 +1,5 @@
+---
+title: Level 1.1
+---
+
+Level 1.1

exampleSite/content/collapse/level-1/level-1-2.md

@@ -0,0 +1,5 @@
+---
+title: Level 1.2
+---
+
+Level 1.2

exampleSite/content/collapse/level-2/_index.md

@@ -0,0 +1,5 @@
+---
+geekdocCollapseSection: true
+---
+
+Level-2

exampleSite/content/collapse/level-2/level-2-1.md

@@ -0,0 +1,5 @@
+---
+title: Level 2.1
+---
+
+Level 2.1

exampleSite/content/collapse/level-2/level-2-2.md

@@ -0,0 +1,5 @@
+---
+title: Level 2.2
+---
+
+Level 2.2

exampleSite/content/shortcodes/_index.md

@@ -0,0 +1,4 @@
+---
+title: Shortcodes
+weight: -10
+---

exampleSite/content/usage/_index.md

@@ -1,4 +1,4 @@
 ---
 title: Usage
-weight: -10
+weight: -20
 ---

exampleSite/content/usage/configuration.md

@@ -207,6 +207,9 @@ geekdocHidden = true
 # NOTE: Only applies when 'geekdocHidden = true'.
 geekdocHiddenTocTree = true
 
+# Set to true to make a section foldable in side menu (file-tree menu only)
+geekdocCollapseSection = true
+
 # Add an anchor link to headlines
 geekdocAnchor = true
 ```
@@ -251,6 +254,9 @@ geekdocHidden: true
 # NOTE: Only applies when 'geekdocHidden: true'.
 geekdocHiddenTocTree: true
 
+# Set to true to make a section foldable in side menu (file-tree menu only)
+geekdocCollapseSection: true
+
 # Add an anchor link to headlines
 geekdocAnchor: true
 ```

layouts/partials/menu-filetree.html

@@ -9,7 +9,18 @@
         {{ range .sect.GroupBy "Weight" }}
             {{ range .ByTitle }}
             {{ if not .Params.GeekdocHidden }}
+
+            {{ $numberOfPages := (add (len .Pages) (len .Sections)) }}
+            {{ $isParent := and (ne $numberOfPages 0) (not .Params.GeekdocFlatSection) }}
+            {{ $isCurrent := eq $current . }}
+            {{ $isAncestor := .IsAncestor $current }}
+            {{ $id := substr (sha1 .Permalink) 0 8 }}
+
             <li>
+            {{ if and $isParent .Params.GeekdocCollapseSection }}
+            <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 }}
             {{ if or .Content .Params.GeekdocFlatSection }}
                 <span class="flex">
                     <a href="{{ .RelPermalink }}" class="gdoc-nav__entry {{ if eq $current . }}is-active{{ end }}">
@@ -19,9 +30,13 @@
             {{ else }}
                 <span class="flex">{{ partial "title" . }}</span>
             {{ end }}
+            {{ if and $isParent .Params.GeekdocCollapseSection }}
+                <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 }}
 
-            {{ $numberOfPages := (add (len .Pages) (len .Sections)) }}
-            {{ if and (ne $numberOfPages 0) (not .Params.GeekdocFlatSection) }}
+            {{ if $isParent }}
                 {{ template "tree-nav" dict "sect" .Pages "current" $current}}
             {{ end }}
             </li>

src/sass/_base.scss

@@ -155,6 +155,7 @@ img {
     margin: 0;
     padding: 0;
     list-style: none;
+    user-select: none;
 
     ul {
       padding-left: $padding-16;
@@ -169,6 +170,39 @@ img {
     }
   }
 
+  &__toggle {
+    display: none;
+
+    & ~ label {
+      cursor: pointer;
+
+      .icon {
+        font-size: 0.7rem;
+      }
+    }
+
+    &:not(:checked) {
+      & ~ ul,
+      & ~ label .icon.keyborad_arrow_down {
+        display: none;
+      }
+      & ~ label .icon.keyborad_arrow_left {
+        display: block;
+      }
+    }
+
+    &:checked {
+      & ~ ul,
+      & ~ label .icon.keyborad_arrow_down {
+        display: block;
+      }
+
+      & ~ label .icon.keyborad_arrow_left {
+        display: none;
+      }
+    }
+  }
+
   &__entry {
     flex: 1;
     color: $body-font-color;
@@ -185,7 +219,9 @@ img {
   }
 
   &--main > ul > li > span,
-  &--main > ul > li > span > a {
+  &--main > ul > li > span > a,
+  &--main > ul > li > label,
+  &--main > ul > li > label > a {
     font-weight: bold;
   }