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,90 +84,147 @@
     }
 }
 
-.widget--toc {
+.toc-nav {
-    background-color: var(--card-background);
+    overflow-x: auto;
-    border-radius: var(--card-border-radius);
+    max-height: 75vh;
-    box-shadow: var(--shadow-l1);
+
+    ol,
+    ul {
+        margin: 0;
+        padding: 0;
+    }
+
+    ol {
+        list-style-type: none;
+        counter-reset: item;
+
+        li a:first-of-type::before {
+            counter-increment: item;
+            content: counters(item, ".") ". ";
+            font-weight: bold;
+            margin-right: 5px;
+        }
+    }
+
+    &>ul {
+        padding: 0 1em;
+    }
+
+    li {
+        margin: 15px 0 15px 20px;
+        padding: 5px;
+
+        &>ol,
+        &>ul {
+            margin-top: 10px;
+            padding-left: 10px;
+            margin-bottom: -5px;
+
+            &>li:last-child {
+                margin-bottom: 0;
+            }
+        }
+    }
+
+    li.active-class>a {
+        border-left: var(--heading-border-size) solid var(--accent-color);
+        font-weight: bold;
+    }
+
+    ul li.active-class>a {
+        display: block;
+    }
+
+    @function repeat($str, $n) {
+        $result: "";
+
+        @for $_ from 0 to $n {
+            $result: $result + $str;
+        }
+
+        @return $result;
+    }
+
+    // Support up to 6 levels of indentation for lists in ToCs
+    @for $i from 0 to 5 {
+        &>ul #{repeat("> li > ul", $i)}>li.active-class>a {
+            $n: 25 + $i * 35;
+            margin-left: calc(-#{$n}px - 1em);
+            padding-left: calc(#{$n}px + 1em - var(--heading-border-size));
+        }
+
+        &>ol #{repeat("> li > ol", $i)}>li.active-class>a {
+            $n: 9 + $i * 35;
+            margin-left: calc(-#{$n}px - 1em);
+            padding-left: calc(#{$n}px + 1em - var(--heading-border-size));
+            display: block;
+        }
+    }
+}
+
+.widget--toc,
+.article-toc {
     display: flex;
     flex-direction: column;
     color: var(--card-text-color-main);
-    overflow: hidden;
 
     ::-webkit-scrollbar-thumb {
         background-color: var(--card-separator-color);
     }
+}
 
-    #TableOfContents {
+.widget--toc {
-        overflow-x: auto;
+    background-color: var(--card-background);
-        max-height: 75vh;
+    border-radius: var(--card-border-radius);
+    box-shadow: var(--shadow-l1);
+    overflow: hidden;
+}
 
-        ol,
+.article-toc {
-        ul {
+    padding: 0 var(--card-padding);
-            margin: 0;
+    margin-top: 20px;
-            padding: 0;
-        }
 
-        ol {
+    @include respond(lg) {
-            list-style-type: none;
+        display: none;
-            counter-reset: item;
+    }
 
-            li a:first-of-type::before {
+    details {
-                counter-increment: item;
+        background-color: var(--card-background);
-                content: counters(item, ".") ". ";
+        border-radius: var(--card-border-radius);
-                font-weight: bold;
+        box-shadow: var(--shadow-l2);
-                margin-right: 5px;
-            }
-        }
 
-        & > ul {
+        &[open] {
-            padding: 0 1em;
+            .article-toc-title {
-        }
+                svg {
-
+                    transform: rotate(90deg);
-        li {
-            margin: 15px 0 15px 20px;
-            padding: 5px;
-
-            & > ol,
-            & > ul {
-                margin-top: 10px;
-                padding-left: 10px;
-                margin-bottom: -5px;
-
-                & > li:last-child {
-                    margin-bottom: 0;
                 }
             }
         }
-        li.active-class > a {
-            border-left: var(--heading-border-size) solid var(--accent-color);
-            font-weight: bold;
-        }
 
-        ul li.active-class > a {
+        summary {
-            display: block;
+            list-style: none;
-        }
+            padding: 15px 20px;
+            cursor: pointer;
 
-        @function repeat($str, $n) {
+            &::-webkit-details-marker {
-            $result: "";
+                display: none;
-            @for $_ from 0 to $n {
-                $result: $result + $str;
-            }
-            @return $result;
-        }
-
-        // Support up to 6 levels of indentation for lists in ToCs
-        @for $i from 0 to 5 {
-            & > ul #{repeat("> li > ul", $i)} > li.active-class > a {
-                $n: 25 + $i * 35;
-                margin-left: calc(-#{$n}px - 1em);
-                padding-left: calc(#{$n}px + 1em - var(--heading-border-size));
             }
 
-            & > ol #{repeat("> li > ol", $i)} > li.active-class > a {
+            .article-toc-title {
-                $n: 9 + $i * 35;
+                display: flex;
-                margin-left: calc(-#{$n}px - 1em);
+                align-items: center;
-                padding-left: calc(#{$n}px + 1em - var(--heading-border-size));
+                gap: 10px;
-                display: block;
+                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;
+                }
             }
         }
     }
@@ -177,7 +234,7 @@
     overflow-x: auto;
     padding-bottom: 15px;
 
-    & > .flex {
+    &>.flex {
         float: left;
     }
 
@@ -208,7 +265,7 @@
     padding: 0 var(--card-padding);
     line-height: var(--article-line-height);
 
-    & > p {
+    &>p {
         margin: 1.5em 0;
     }
 
@@ -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;
@@ -406,8 +467,8 @@
         padding-bottom: 56.25%;
         overflow: hidden;
 
-        & > iframe,
+        &>iframe,
-        & > video {
+        &>video {
             position: absolute;
             width: 100%;
             height: 100%;
@@ -444,7 +505,7 @@
     }
 
     /// Make long KaTeX equations scrollable in the x-axis
-    .katex-display > .katex {
+    .katex-display>.katex {
         overflow-x: auto;
         overflow-y: hidden;
     }

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