Add scrolling table of contents for navigation

source/assets/css/extended/sidetoc.css

@@ -0,0 +1,62 @@
+/* General layout container */
+.page-container {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    position: relative;
+}
+
+/* Main content on the left */
+.content-area {
+    flex: 1;
+    max-width: 800px;
+    padding: 0 20px;
+}
+
+/* ToC Sidebar */
+.toc-sidebar {
+    position: fixed;
+    top: 100px;
+    right: 20px;
+    /* Positioned to the right */
+    width: calc(20%);
+    /* Dynamic width */
+    max-width: 400px;
+    /* Maximum width */
+    min-width: 200px;
+    /* Minimum width */
+    max-height: 80vh;
+    /* Scrollable height */
+    overflow-y: auto;
+    /* Allow scrolling if content exceeds height */
+    padding-left: 20px;
+    z-index: 1000;
+}
+
+/* Style for the <details> element */
+.toc-sidebar details {
+    border-radius: 5px;
+    padding: 10px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+}
+
+/* Style for the summary element */
+.toc-sidebar summary {
+    font-size: 1.2rem;
+    font-weight: bold;
+    cursor: pointer;
+    outline: none;
+    padding-bottom: 10px;
+}
+
+/* Media query for smaller screens */
+@media (max-width: 1200px) {
+    .toc-sidebar {
+        display: none;
+        /* Hide the ToC on smaller screens */
+    }
+
+    .content-area {
+        max-width: 100%;
+    }
+}

source/layouts/_default/single.html

@@ -0,0 +1,71 @@
+{{ define "main" }}
+<div class="page-container">
+    <!-- Main Content -->
+    <div class="content-area">
+        <article class="post-single">
+            <header class="post-header">
+                {{ partial "breadcrumbs.html" . }}
+                <h1 class="post-title">
+                    {{ .Title }}
+                    {{- if .Draft }}<sup><span class="entry-isdraft">&nbsp;&nbsp;[draft]</span></sup>{{- end }}
+                </h1>
+                {{ if .Description }}
+                <div class="post-description">
+                    {{ .Description }}
+                </div>
+                {{ end }}
+                {{ if not (.Param "hideMeta") }}
+                <div class="post-meta">
+                    {{- partial "post_meta.html" . -}}
+                </div>
+                {{ end }}
+            </header>
+
+            {{- if .Params.cover.image }}
+            <figure class="entry-cover">
+                {{- partial "cover.html" . -}}
+            </figure>
+            {{- end }}
+
+            <div class="post-content">
+                <article>
+                    {{- if not (.Param "disableAnchoredHeadings") }}
+                    {{- partial "anchored_headings.html" .Content -}}
+                    {{- else }}{{ .Content }}{{ end }}
+                </article>
+            </div>
+
+            <footer class="post-footer">
+                {{- if .Params.tags }}
+                <ul class="post-tags">
+                    {{- range ($.GetTerms "tags") }}
+                    <li><a href="{{ .Permalink }}">{{ .LinkTitle }}</a></li>
+                    {{- end }}
+                </ul>
+                {{- end }}
+
+                {{- if (.Param "ShowPostNavLinks") }}
+                {{- partial "post_nav_links.html" . }}
+                {{- end }}
+
+                {{- if (and site.Params.ShowShareButtons (ne .Params.disableShare true)) }}
+                {{- partial "share_icons.html" . -}}
+                {{- end }}
+            </footer>
+
+            {{- if (.Param "comments") }}
+            {{- partial "comments.html" . }}
+            {{- end }}
+        </article>
+    </div>
+
+    <aside class="toc-sidebar">
+        <details open>
+            <summary>Table of Contents</summary>
+            <div class="toc-content">
+                {{ .TableOfContents }}
+            </div>
+        </details>
+    </aside>
+</div>
+{{ end }}

source/layouts/partials/toc.html

@@ -0,0 +1,6 @@
+{{ if and (gt .WordCount 400) (.Params.toc | default true) }}
+<aside class="toc-sidebar">
+    <h2>Table of Contents</h2>
+    {{ .TableOfContents }}
+</aside>
+{{ end }}