feat: add collapsible table of contents for smaller screens (#1245)

* refactor: create partial/article/components/toc

* feat: add collapsible table of contents for smaller screens

layouts/_partials/article/article.html

@@ -1,6 +1,22 @@
 <article class="{{ if .Params.image }}has-image {{ end }}main-article">
     {{ partial "article/components/header" . }}
 
+    {{ if .Scratch.Get "TOCEnabled" }}
+    <aside class="article-toc">
+        <details>
+            <summary>
+                <div class="article-toc-title">
+                    {{ partial "helper/icon" "chevron-right" }}
+                    <span>{{ T "article.tableOfContents" }}</span>
+                </div>
+            </summary>
+            <nav class="toc-nav">
+                {{ partial "article/components/toc" . | safeHTML }}
+            </nav>
+        </details>
+    </aside>
+    {{ end }}
+
     {{ partial "article/components/content" . }}
 
     {{ partial "article/components/footer" . }}

layouts/_partials/article/components/toc.html

@@ -0,0 +1,6 @@
+{{/* Remove <nav id="TableOfContents"> and </nav> from .TableOfContents */}}
+{{ $toc := .TableOfContents }}
+{{ $toc = replace $toc "<nav id=\"TableOfContents\">" "" }}
+{{ $toc = replace $toc "</nav>" "" }}
+
+{{ return $toc }}

layouts/_partials/widget/toc.html

@@ -6,7 +6,9 @@
         <h2 class="widget-title section-title">{{ T "article.tableOfContents" }}</h2>
         
         <div class="widget--toc">
-            {{ .Context.TableOfContents }}
+            <nav class="toc-nav" id="TableOfContents">
+                {{ partial "article/components/toc" .Context | safeHTML }}
+            </nav>
         </div>
     </section>
 {{ end }}