menu: control sub-menu expansion #49

exampleSite/content/cont/pages/_index.en.md

@@ -102,6 +102,8 @@ Each Hugo page has to define a [Front Matter](https://gohugo.io/content/front-ma
 disableToc = "false"
 # If set, this will be used for the page's menu entry (instead of the `title` attribute)
 menuTitle = ""
+# If set, this will explicitly override common rules for the expand state of a page's menu entry
+alwaysopen = true
 # The title of the page in menu will be prefixed by this HTML content
 pre = ""
 # The title of the page in menu will be postfixed by this HTML content
@@ -159,6 +161,20 @@ menuTitle = "Linux"
 +++
 ```
 
+### Override expand state rules for menu entries
+
+You can change how the theme expands menu entries on the side of the content with the `alwaysopen` setting on a per page basis. If `alwaysopen=false` for any given entry, its children will not be shown in the menu as long as it is not necessary for the sake of navigation.
+
+The theme generates the menu based on the following rules:
+
+- all parent entries of the active page including their siblings are shown regardless of any settings
+- immediate children entries of the active page are shown regardless of any settings
+- if not overridden, all other first level entries behave like they would have been given `alwaysopen=false`
+- if not overridden, all other entries of levels besides the first behave like they would have been given `alwaysopen=true`
+- all visible entries show their immediate children entries if `alwaysopen=true`; this proceeds recursivley
+- all remaining entries are not shown
+
+You can see this feature in action on the example page for [children shortcode]({{< relref "shortcodes/children" >}}) and its children pages.
 ## Homepage
 
 To configure your home page, you basically have three choices:

exampleSite/content/shortcodes/children/_index.en.md

@@ -1,6 +1,7 @@
 ---
 title : Children
 description : List the child pages of a page
+alwaysopen : false
 ---
 
 Use the children shortcode to list the child pages of a page and the further descendants (children's children). By default, the shortcode displays links to the child pages.

exampleSite/content/shortcodes/children/children-1/_index.en.md

@@ -1,6 +1,7 @@
 +++
 title = "page 1"
 description = "This is a demo child page"
+alwaysopen = false
 +++
 
 This is a demo child page

exampleSite/content/shortcodes/children/children-1/children-1-1/children-1-1-2/_index.en.md

@@ -0,0 +1,6 @@
++++
+title = "page 1-1-2"
+description = "This is a demo child page"
++++
+
+This is a demo child page

exampleSite/content/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-1/_index.en.md

@@ -0,0 +1,6 @@
++++
+title = "page 1-1-2-1"
+description = "This is a demo child page"
++++
+
+This is a demo child page

exampleSite/content/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-2/_index.en.md

@@ -0,0 +1,6 @@
++++
+title = "page 1-1-2-2"
+description = "This is a demo child page"
++++
+
+This is a demo child page

exampleSite/content/shortcodes/children/children-2/_index.en.md

@@ -1,6 +1,7 @@
 +++
 title = "page 2"
 description = ""
+alwaysopen = false
 +++
 
 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

exampleSite/content/shortcodes/children/children-3/_index.en.md

@@ -1,6 +1,7 @@
 +++
 title = "page 3"
 description = "This is a demo child page"
+alwaysopen = false
 +++
 
 This is a demo child page, not displayed in the menu

exampleSite/content/shortcodes/children/children-4/_index.en.md

@@ -2,6 +2,7 @@
 title = "page 4"
 description = "This is a demo child page"
 hidden = true
+alwaysopen = false
 +++
 
 This is a demo child page, not displayed in the menu

layouts/partials/menu.html

@@ -23,11 +23,11 @@
     <ul class="topics">
       {{if eq .Site.Params.ordersectionsby "title"}}
         {{range .Site.Home.Sections.ByTitle}}
-        {{ template "section-tree-nav" dict "sect" . "currentnode" $currentNode "showvisitedlinks" $showvisitedlinks}}
+        {{ template "section-tree-nav" dict "sect" . "currentnode" $currentNode "showvisitedlinks" $showvisitedlinks "alwaysopen" false }}
         {{end}}
       {{else}}
         {{range .Site.Home.Sections.ByWeight}}
-        {{ template "section-tree-nav" dict "sect" . "currentnode" $currentNode "showvisitedlinks" $showvisitedlinks}}
+        {{ template "section-tree-nav" dict "sect" . "currentnode" $currentNode "showvisitedlinks" $showvisitedlinks "alwaysopen" false }}
         {{end}}
       {{end}}
     </ul>
@@ -102,20 +102,16 @@
 {{ $showvisitedlinks := .showvisitedlinks }}
 {{ $currentNode := .currentnode }}
 {{ $currentFileUniqueID := "" }}
+{{ $alwaysopen := .alwaysopen }}
 {{ with $currentNode.File }}{{ $currentFileUniqueID = .UniqueID }}{{ end }}
   {{with .sect}}
     {{if and .IsSection (or (not .Params.hidden) $.showhidden)}}
       {{safeHTML .Params.head}}
-      <li data-nav-id="{{.RelPermalink}}" title="{{.Title}}" class="dd-item
+      {{ $currentAlwaysopen := .Params.alwaysopen | default $alwaysopen }}
-        {{if .IsAncestor $currentNode }}parent{{end}}
+      <li data-nav-id="{{.RelPermalink}}" title="{{.Title}}" class="dd-item{{if eq .File.UniqueID $currentFileUniqueID}} active{{else if .IsAncestor $currentNode }} parent{{else if $currentAlwaysopen}} parent{{end}}">
-        {{if eq .File.UniqueID $currentFileUniqueID}}active{{end}}
-        {{if .Params.alwaysopen}}parent{{end}}
-        ">
         <a href="{{.RelPermalink}}">
           {{safeHTML .Params.Pre}}{{or .Params.menuTitle .LinkTitle .Title}}{{safeHTML .Params.Post}}
-          {{ if $showvisitedlinks}}
+          {{ if $showvisitedlinks}}<i class="fas fa-check read-icon"></i>{{end}}
-            <i class="fas fa-check read-icon"></i>
-          {{ end }}
         </a>
         {{ $numberOfPages := (add (len ( where .Pages "Params.hidden" "ne" true )) (len ( where .Sections "Params.hidden" "ne" true ))) }}
         {{ if ne $numberOfPages 0 }}
@@ -130,14 +126,14 @@
               {{ range $pages.ByTitle }}
                 {{ if and .Params.hidden (not $.showhidden) }}
                 {{else}}
-                  {{ template "section-tree-nav" dict "sect" . "currentnode" $currentNode "showvisitedlinks" $showvisitedlinks }}
+                  {{ template "section-tree-nav" dict "sect" . "currentnode" $currentNode "showvisitedlinks" $showvisitedlinks "alwaysopen" true}}
                 {{end}}
               {{ end }}
             {{else}}
               {{ range $pages.ByWeight }}
                 {{ if and .Params.hidden (not $.showhidden) }}
                 {{else}}
-                  {{ template "section-tree-nav" dict "sect" . "currentnode" $currentNode "showvisitedlinks" $showvisitedlinks }}
+                  {{ template "section-tree-nav" dict "sect" . "currentnode" $currentNode "showvisitedlinks" $showvisitedlinks "alwaysopen" true}}
                 {{end}}
               {{ end }}
             {{end}}
@@ -145,10 +141,10 @@
         {{ end }}
       </li>
     {{else if not .Params.Hidden }}
-      <li data-nav-id="{{.RelPermalink}}" title="{{.Title}}" class="dd-item {{if eq .File.UniqueID $currentFileUniqueID}}active{{end}}">
+      <li data-nav-id="{{.RelPermalink}}" title="{{.Title}}" class="dd-item{{if eq .File.UniqueID $currentFileUniqueID}} active{{end}}">
         <a href="{{ .RelPermalink}}">
-        {{safeHTML .Params.Pre}}{{or .Params.menuTitle .LinkTitle .Title}}{{safeHTML .Params.Post}}
+          {{safeHTML .Params.Pre}}{{or .Params.menuTitle .LinkTitle .Title}}{{safeHTML .Params.Post}}
-        {{ if $showvisitedlinks}}<i class="fas fa-check read-icon"></i>{{end}}
+          {{ if $showvisitedlinks}}<i class="fas fa-check read-icon"></i>{{end}}
         </a>
       </li>
     {{end}}

static/css/theme.css

@@ -190,43 +190,6 @@ textarea:focus, input[type="email"]:focus, input[type="number"]:focus, input[typ
 #sidebar a.padding {
     padding: 0 1rem;
 }
-#sidebar h5 {
-    margin: 2rem 0 0;
-    position: relative;
-    line-height: 2;
-}
-#sidebar h5 a {
-    display: block;
-    margin-left: 0;
-    margin-right: 0;
-    padding-left: 1rem;
-    padding-right: 1rem;
-}
-#sidebar h5 i {
-    color: rgba(204, 204, 204, 0.6);
-    position: absolute;
-    right: 0.6rem;
-    top: 0.7rem;
-    font-size: 80%;
-}
-#sidebar h5.parent a {
-    background: #201b24;
-    color: #d9d9d9 !important;
-}
-#sidebar h5.active a {
-    background: #fff;
-    color: #777 !important;
-}
-#sidebar h5.active i {
-    color: #777 !important;
-}
-#sidebar h5 + ul.topics {
-    display: none;
-    margin-top: 0;
-}
-#sidebar h5.parent + ul.topics, #sidebar h5.active + ul.topics {
-    display: block;
-}
 #sidebar ul {
     list-style: none;
     padding: 0;
@@ -254,7 +217,7 @@ textarea:focus, input[type="email"]:focus, input[type="number"]:focus, input[typ
 #sidebar ul.topics ul ul {
     padding-bottom: 0;
 }
-#sidebar ul.topics li.parent ul, #sidebar ul.topics > li.active ul {
+#sidebar ul.topics li.parent > ul, #sidebar ul.topics li.active > ul {
     display: block;
 }
 #sidebar ul.topics > li > a {
@@ -1093,11 +1056,6 @@ pre .copy-to-clipboard:hover {
     border-color: #505050;
     background-color: rgba( 236, 236, 236, .9 );
 }
-.parent-element {
-    -webkit-transform-style: preserve-3d;
-    -moz-transform-style: preserve-3d;
-    transform-style: preserve-3d;
-}
 
 #sidebar ul.topics > li > a .read-icon {
     margin-top: 9px;