separate navigation menu scroll

Author: Aytackydln

themes/aurora/assets/js/scroll-active-link.js

@@ -0,0 +1 @@
+document.getElementById("active-link")?.scrollIntoView({behavior: "instant", block: "center"});

themes/aurora/assets/scss/_nav.scss

@@ -1,5 +1,12 @@
+$header-height: 64px;
+
 nav#main-nav {
 	flex: 1 1 $nav-width;
+  position: sticky;
+  top: 64px;
+  max-height: calc(100vh - 64px);
+  scrollbar-width: thin;
+  scrollbar-color: rgba(0,0,0,0.95) transparent;
 	overflow-y: auto;
 	overflow-x: hidden;
 	border-right: 1px solid rgba($text-primary, .15);
@@ -92,7 +99,7 @@ nav#main-nav {
 	div::after {
 		top: 8px;
 	}
-	
+
 	div::before {
 		top: 16px;
 	}

themes/aurora/layouts/partials/content.html

@@ -1,6 +1,6 @@
 <article class="wide">
     <!-- Title -->
-    <h1 class="page-title">{{ default $.Site.Title .Title }}</h1><br/>
+    <h1 class="page-title" autofocus focusable>{{ default $.Site.Title .Title }}</h1><br/>
     <span class="date-info italic">Last updated {{ .Lastmod.Format "02.01.2006" }}</span>
 
     <!-- Actual page content -->

themes/aurora/layouts/partials/nav.html

@@ -19,12 +19,12 @@
             {{ range $.Site.Sections }}
                 <div class="nav-section">
                     <span class="nav-title{{ if eq $cur.Permalink .Permalink }} active{{ end }}">
-                        <a href="{{ .Permalink }}">{{ .Title }}</a>
+                        <a href="{{ .Permalink }}"{{ if eq $cur.Permalink .Permalink }} id="active-link"{{ end }}>{{ .Title }}</a>
                     </span>
                     <ul class="nav-list">
                         {{ range .Pages }}
                             <li class="{{ if eq $cur.Permalink .Permalink }}active{{ end }}">
-                                <a href="{{ .Permalink }}">{{ .Title }}</a>
+                                <a href="{{ .Permalink }}"{{ if eq $cur.Permalink .Permalink }} id="active-link"{{ end }}>{{ .Title }}</a>
                             </li>
                         {{ end }}
                     </ul>

themes/aurora/layouts/partials/scripts.html

@@ -2,7 +2,8 @@
 {{ $tabs := resources.Get "js/tabs-script.js" }}
 {{ $mobile := resources.Get "js/mobile.js" }}
 {{ $scroll := resources.Get "js/scroll-offset.js" }}
-{{ $scripts := slice $externalLink $tabs $mobile $scroll | resources.Concat "app.js" | minify | fingerprint }}
+{{ $scrollActiveLink := resources.Get "js/scroll-active-link.js" }}
+{{ $scripts := slice $externalLink $tabs $mobile $scroll $scrollActiveLink | resources.Concat "app.js" | minify | fingerprint }}
 {{ with $scripts }}
     <script>{{ .Content | safeJS }}</script>
 {{ end }}