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

assets/scss/partials/layout/article.scss

@@ -84,20 +84,7 @@
     }
 }
 
-.widget--toc {
+.toc-nav {
-    background-color: var(--card-background);
-    border-radius: var(--card-border-radius);
-    box-shadow: var(--shadow-l1);
-    display: flex;
-    flex-direction: column;
-    color: var(--card-text-color-main);
-    overflow: hidden;
-
-    ::-webkit-scrollbar-thumb {
-        background-color: var(--card-separator-color);
-    }
-
-    #TableOfContents {
     overflow-x: auto;
     max-height: 75vh;
 
@@ -138,6 +125,7 @@
             }
         }
     }
+
     li.active-class>a {
         border-left: var(--heading-border-size) solid var(--accent-color);
         font-weight: bold;
@@ -149,9 +137,11 @@
 
     @function repeat($str, $n) {
         $result: "";
+
         @for $_ from 0 to $n {
             $result: $result + $str;
         }
+
         @return $result;
     }
 
@@ -171,6 +161,73 @@
         }
     }
 }
+
+.widget--toc,
+.article-toc {
+    display: flex;
+    flex-direction: column;
+    color: var(--card-text-color-main);
+
+    ::-webkit-scrollbar-thumb {
+        background-color: var(--card-separator-color);
+    }
+}
+
+.widget--toc {
+    background-color: var(--card-background);
+    border-radius: var(--card-border-radius);
+    box-shadow: var(--shadow-l1);
+    overflow: hidden;
+}
+
+.article-toc {
+    padding: 0 var(--card-padding);
+    margin-top: 20px;
+
+    @include respond(lg) {
+        display: none;
+    }
+
+    details {
+        background-color: var(--card-background);
+        border-radius: var(--card-border-radius);
+        box-shadow: var(--shadow-l2);
+
+        &[open] {
+            .article-toc-title {
+                svg {
+                    transform: rotate(90deg);
+                }
+            }
+        }
+
+        summary {
+            list-style: none;
+            padding: 15px 20px;
+            cursor: pointer;
+
+            &::-webkit-details-marker {
+                display: none;
+            }
+
+            .article-toc-title {
+                display: flex;
+                align-items: center;
+                gap: 10px;
+                text-transform: uppercase;
+                font-size: 1.4rem;
+                font-weight: bold;
+                color: var(--card-text-color-tertiary);
+
+                svg {
+                    width: 20px;
+                    height: 20px;
+                    stroke-width: 1.33;
+                    transition: transform 0.3s ease;
+                }
+            }
+        }
+    }
 }
 
 .related-content {
@@ -316,10 +373,12 @@
         line-height: 1.428571429;
         word-break: break-all;
         padding: var(--card-padding);
+
         //  keep Codeblocks LTR
         [dir="rtl"] & {
             direction: ltr;
         }
+
         code {
             color: unset;
             border: none;
@@ -338,10 +397,12 @@
                 opacity: 1;
             }
         }
+
         // keep Codeblocks LTR
         [dir="rtl"] & {
             direction: ltr;
         }
+
         pre {
             margin: initial;
             padding: 0;

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 }}