Merge pull request #475 from narrenfrei/dev-menu-structure

rebuilt sidebar menu structure

layouts/partials/sidebar-tree.html

@@ -1,5 +1,6 @@
 {{/* We cache this partial for bigger sites and set the active class client side. */}}
-{{ $shouldDelayActive := ge (len .Site.Pages) 2000 }}
+{{ $sidebarCacheLimit := cond (isset .Site.Params.ui "sidebar_cache_limit") .Site.Params.ui.sidebar_cache_limit 2000 }}
+{{ $shouldDelayActive := ge (len .Site.Pages) $sidebarCacheLimit }}
 <div id="td-sidebar-menu" class="td-sidebar__inner{{ if $shouldDelayActive }} d-none{{ end }}">
   {{ if not .Site.Params.ui.sidebar_search_disable }}
   <form class="td-sidebar__search d-flex align-items-center">
@@ -24,36 +25,42 @@
     </div>
     {{ end }}
     {{ $navRoot := cond (and (ne .Params.toc_root true) (eq .Site.Home.Type "docs")) .Site.Home .FirstSection }}
-    {{ template "section-tree-nav-section" (dict "page" . "section" $navRoot "delayActive" $shouldDelayActive)  }}
+    {{ $ulNr := 0 }}
+    {{ $ulShow := cond (isset .Site.Params.ui "ul_show") .Site.Params.ui.ul_show 1 }}
+    {{ $sidebarMenuTruncate := cond (isset .Site.Params.ui "sidebar_menu_truncate") .Site.Params.ui.sidebar_menu_truncate 50 }}
+    <ul class="td-sidebar-nav__section pr-md-3 ul-{{ $ulNr }}">
+      {{ template "section-tree-nav-section" (dict "page" . "section" $navRoot "shouldDelayActive" $shouldDelayActive "sidebarMenuTruncate" $sidebarMenuTruncate "ulNr" $ulNr "ulShow" (add $ulShow 1)) }}
+    </ul>
   </nav>
 </div>
 {{ define "section-tree-nav-section" }}
-{{ $s := .section }}
-{{ $p := .page }}
-{{ $shouldDelayActive := .delayActive }}
-{{ $active := eq $p.CurrentSection $s }}
-{{ $show := or (and (not $p.Site.Params.ui.sidebar_menu_compact) ($p.IsAncestor $s)) ($p.IsDescendant $s) }}
-{{ $sid := $s.RelPermalink | anchorize }}
-<ul class="td-sidebar-nav__section pr-md-3">
-  <li class="td-sidebar-nav__section-title">
-    <a  href="{{ $s.RelPermalink }}" class="align-left pl-0 pr-2{{ if not $show }} collapsed{{ end }}{{ if $active}} active{{ end }} td-sidebar-link td-sidebar-link__section">{{ $s.LinkTitle }}</a>
-  </li>
-  <ul>
-    <li class="collapse {{ if $show }}show{{ end }}" id="{{ $sid }}">
-      {{ $pages := where (union $s.Pages $s.Sections).ByWeight ".Params.toc_hide" "!=" true }}
-      {{ $pages := $pages | first 50 }}
-      {{ range $pages }}
-      {{ if (not (and (eq $s $p.Site.Home) (eq .Params.toc_root true))) }}
-        {{ if .IsPage }}
-          {{ $mid := printf "m-%s" (.RelPermalink | anchorize) }}
-          {{ $active := eq . $p }}
-          <a class="td-sidebar-link td-sidebar-link__page {{ if and (not $shouldDelayActive) $active }} active{{ end }}" id="{{ $mid }}" href="{{ .RelPermalink }}">{{ .LinkTitle }}</a>
-        {{ else }}
-          {{ template "section-tree-nav-section" (dict "page" $p "section" .) }}
+  {{ $s := .section }}
+  {{ $p := .page }}
+  {{ $shouldDelayActive := .shouldDelayActive }}
+  {{ $sidebarMenuTruncate := .sidebarMenuTruncate }}
+  {{ $treeRoot := cond (eq .ulNr 0) true false }}
+  {{ $ulNr := .ulNr }}
+  {{ $ulShow := .ulShow }}
+  {{ $active := and (not $shouldDelayActive) (eq $s $p) }}
+  {{ $activePath := and (not $shouldDelayActive) ($p.IsDescendant $s) }}
+  {{ $show := cond (or (lt $ulNr $ulShow) $activePath (and (not $shouldDelayActive) (eq $s.Parent $p.Parent)) (and (not $shouldDelayActive) (eq $s.Parent $p)) (not $p.Site.Params.ui.sidebar_menu_compact)) true false }}
+  {{ $mid := printf "m-%s" ($s.RelPermalink | anchorize) }}
+  {{ $pages_tmp := where (union $s.Pages $s.Sections).ByWeight ".Params.toc_hide" "!=" true }}
+  {{ $pages := $pages_tmp | first $sidebarMenuTruncate }}
+  {{ $withChild := gt (len $pages) 0 }}
+  <li class="td-sidebar-nav__section-title td-sidebar-nav__section{{ if $withChild }} with-child{{ else }} without-child{{ end }}{{ if $activePath }} active-path{{ end }}{{ if not $show }} collapse{{ end }}" id="{{ $mid }}-li">
+    <span class="{{ if $active }}td-sidebar-nav-active-item{{ end }}{{ if $treeRoot }} tree-root{{ end }}">
+      <a  href="{{ $s.RelPermalink }}" class="align-left pl-0 pr-2{{ if $active}} active{{ end }} td-sidebar-link{{ if $s.IsPage }} td-sidebar-link__page{{ else }} td-sidebar-link__section{{ end }}" id="{{ $mid }}">{{ $s.LinkTitle }}</a>
+    </span>
+    {{if $withChild }}
+      {{ $ulNr := add $ulNr 1 }}
+      <ul class="pr-md-3 ul-{{ $ulNr }}">
+        {{ range $pages }}
+          {{ if (not (and (eq $s $p.Site.Home) (eq .Params.toc_root true))) }}
+            {{ template "section-tree-nav-section" (dict "page" $p "section" . "shouldDelayActive" $shouldDelayActive "sidebarMenuTruncate" $sidebarMenuTruncate "ulNr" $ulNr "ulShow" $ulShow) }}
+          {{ end }}
         {{ end }}
-      {{ end }}
-      {{ end }}
-    </li>
-  </ul>
-</ul>
+      </ul>
+    {{ end }}
+  </li>
 {{ end }}

layouts/partials/sidebar.html

@@ -1,14 +1,22 @@
 {{/* The "active" toggle here may delay rendering, so we only cache this side bar menu for bigger sites. */}}
-{{ $shouldCache := ge (len .Site.Pages) 2000 }}
+{{ $sidebarCacheLimit := cond (isset .Site.Params.ui "sidebar_cache_limit") .Site.Params.ui.sidebar_cache_limit 2000 }}
+{{ $shouldCache := ge (len .Site.Pages) $sidebarCacheLimit }}
+{{ $sidebarCacheTypeRoot := cond (isset .Site.Params.ui "sidebar_cache_type_root") .Site.Params.ui.sidebar_cache_type_root false }}
 {{ if $shouldCache }}
-{{ $mid := printf "m-%s" (.RelPermalink | anchorize) }}
-<script>
- $(function() {
- $("#td-sidebar-menu #{{ $mid }}").toggleClass("active"); 
- $("#td-sidebar-menu").toggleClass("d-none"); 
-});
-</script>
-{{ partialCached "sidebar-tree.html" . .CurrentSection.RelPermalink }}
+  {{ $mid := printf "m-%s" (.RelPermalink | anchorize) }}
+  <script>
+    $(function() {
+    $("#td-sidebar-menu a").removeClass("active");
+    $("#td-sidebar-menu #{{ $mid }}").addClass("active"); 
+    $("#td-sidebar-menu #{{ $mid }}-li span").addClass("td-sidebar-nav-active-item"); 
+    $("#td-sidebar-menu #{{ $mid }}").parents("li").addClass("active-path"); 
+    $("#td-sidebar-menu li.active-path").addClass("show"); 
+    $("#td-sidebar-menu #{{ $mid }}-li").siblings("li").addClass("show");  
+    $("#td-sidebar-menu #{{ $mid }}-li").children("ul").children("li").addClass("show");  
+    $("#td-sidebar-menu").toggleClass("d-none"); 
+    });
+  </script>
+  {{ partialCached "sidebar-tree.html" . .FirstSection.RelPermalink }}
 {{ else }}
-{{ partial "sidebar-tree.html" . }}
+  {{ partial "sidebar-tree.html" . }}
 {{ end }}

userguide/content/en/docs/Adding content/navigation.md

@@ -64,7 +64,11 @@ description: >
 
 To hide a page or section from the menu, set `toc_hide: true` in front matter.
 
-By default, the section menu will show the current section fully expanded all the way down. This may make the left nav too long and difficult to scan for bigger sites. Try setting site param `ui.sidebar_menu_compact = true` in `config.toml`.
+By default, the section menu shows the current section fully expanded all the way down. This may make the left nav too long and difficult to scan for bigger sites. Try setting site param `ui.sidebar_menu_compact = true` in `config.toml`.
+
+With the compact menu (`.ui.sidebar_menu_compact = true`), only the current page's ancestors, siblings and direct descendants are shown. You can use the optional parameter `.ui.ul_show` to set a desired menu depth to always be visible. For example, with `.ui.ul_show = 1` the first menu level is always displayed.
+
+On large sites (default: > 2000 pages) the section menu is not generated for each page, but cached for the whole section. The HTML classes for marking the active menu item (and menu path) are then set using JS. You can adjust the limit for activating the cached section menu with the optional parameter `.ui.sidebar_cache_limit`.
 
 ## Breadcrumb navigation