From 09fb1433f2d25d149e014a1fc582febf12bb01ed Mon Sep 17 00:00:00 2001
From: Franz Steininger <narrenfrei@gmail.com>
Date: Thu, 18 Feb 2021 01:14:50 +0100
Subject: [PATCH] Scrolling sidebar tree menu to active item

Added class to active menu item and JS to scroll the menu
Discussed in https://github.com/google/docsy/issues/348
---
 layouts/partials/sidebar-tree.html | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/layouts/partials/sidebar-tree.html b/layouts/partials/sidebar-tree.html
index be897cf3e..04a6ba2e0 100644
--- 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>