Scrolling sidebar tree menu to active item

Added class to active menu item and JS to scroll the menu Discussed in google#348
narrenfrei · Feb 18, 2021 · 09fb143 · 09fb143
1 parent e3a9a40
commit 09fb143
Showing 1 changed file with 8 additions and 3 deletions.
diff --git a/layouts/partials/sidebar-tree.html b/layouts/partials/sidebar-tree.html
@@ -47,7 +47,7 @@
 
   {{if gt (len $pages) 0}}
     <li class="td-sidebar-nav__section-title td-sidebar-nav__section with-sib" id="{{ $sid }}">
-      <span><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></span>
+      <span {{ if $active }} id="td-sidebar-nav-active-item" {{ end }}><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></span>
       <ul class="pr-md-3 ul-{{ $ulNr }}">
 
         {{ range $pages }}
@@ -56,7 +56,7 @@
               {{ $mid := printf "m-%s" (.RelPermalink | anchorize) }}
               {{ $active := eq . $p }}
                 <li class="collapse {{ if $show }}show{{ end }} without-sib" id="{{ $mid }}">
-                  <span><a class="td-sidebar-link td-sidebar-link__page {{ if and (not $shouldDelayActive) $active }} active{{ end }}" href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></span>
+                  <span {{ if and (not $shouldDelayActive) $active }} id="td-sidebar-nav-active-item" {{ end }}><a class="td-sidebar-link td-sidebar-link__page {{ if and (not $shouldDelayActive) $active }} active{{ end }}" href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></span>
                 </li>
             {{ else }}
               {{ template "section-tree-nav-section" (dict "page" $p "section" . "ulNr" $ulNr) }}
@@ -68,7 +68,12 @@
     </li>
   {{ else }}
     <li class="td-sidebar-nav__section-title td-sidebar-nav__section without-sib" id="{{ $sid }}">
-      <span> <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></span>
+      <span {{ if and (not $shouldDelayActive) $active }} id="td-sidebar-nav-active-item" {{ end }}> <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></span>
     </li>
   {{ end }}
 {{ end }}
+
+<script>
+var myElement = document.getElementById('td-sidebar-nav-active-item');
+myElement.scrollIntoView();
+</script>