feat: toggle toc when click toc heading

src/components/TableOfContents.tsx

@@ -1,8 +1,11 @@
 import { ReactiveSet } from "@solid-primitives/set";
 import { TocHeading } from "./TocHeading";
-import { type Component } from "solid-js";
+import { Show, createSignal, type Component } from "solid-js";
+import "./toc.css";
+import { Transition } from "solid-transition-group";
 
 export const TableOfContents: Component<{ tocHeadings: TocHeading[] }> = (props) => {
+    const [isVisible, setVisibility] = createSignal(true);
     const activeSections = new ReactiveSet<string>([]);
     const observer = new IntersectionObserver((sections) => sections.forEach((section) => {
 
@@ -21,9 +24,18 @@ export const TableOfContents: Component<{ tocHeadings: TocHeading[] }> = (props)
         observer.observe(section);
     })
     return (
-        <nav class="w-80">
-            <p class="text-center font-head font-semibold">CONTENTS</p>
-            <TocHeading tocHeadings={props.tocHeadings} activeHeadings={[...activeSections]} />
+        <nav class="w-80 max-h-screen">
+            <button class="contents-btn hover-fill-to-right transition-colors" onclick={() => setVisibility(!isVisible())}>
+                <span>CONTENTS</span>
+                <svg class={`transition-transform mt-0.5 ${isVisible() ? "toc-active" : ""}`} width="24" height="24" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M4.293 8.293a1 1 0 0 1 1.414 0L12 14.586l6.293-6.293a1 1 0 1 1 1.414 1.414l-7 7a1 1 0 0 1-1.414 0l-7-7a1 1 0 0 1 0-1.414Z" /></svg>
+            </button>
+            <Transition name="slide-fade">
+                <Show when={isVisible()}>
+                    <div class="overflow-y-auto max-h-[80vh]">
+                        <TocHeading tocHeadings={props.tocHeadings} activeHeadings={[...activeSections]} />
+                    </div>
+                </Show>
+            </Transition>
         </nav>
     );
 };

src/components/TocHeading.tsx

@@ -1,13 +1,13 @@
 import { Transition } from "solid-transition-group";
-import "./toc_heading.css";
+import "./toc.css";
 import { type Component, For, Show } from "solid-js";
 
 export const TocHeading: Component<{ tocHeadings: TocHeading[], activeHeadings: string[] }> = (props) => {
 
     return (
         <ul>
             <For each={props.tocHeadings}>
-                {(heading) => <li>
+                {(heading) => <li class="toc">
                     <a class={`nav-link ${props.activeHeadings.includes(heading.slug) ? "link-selected" : ""}`} href={`#${heading.slug}`}>
                         {heading.text}
                     </a>

src/components/toc.css

@@ -0,0 +1,30 @@
+.contents-btn {
+    @apply flex justify-between w-full font-semibold font-head py-1 px-2 uppercase border-2 text-gray-800 hover:text-white border-gray-800 dark:text-white dark:hover:text-gray-800 dark:border-white dark:before:bg-gray-800 dark:from-white dark:to-white before:bg-white bg-gradient-to-r from-gray-800 to-gray-800;
+}
+
+li.toc {
+    line-height: 1.7rem;
+    margin: 0.5rem 0.25rem;
+}
+
+li.toc>ul {
+    padding-left: 1.5rem;
+}
+
+.slide-fade-enter-active {
+    transition: all 0.3s ease;
+}
+
+.slide-fade-exit-active {
+    transition: all 0.3s ease;
+}
+
+.slide-fade-enter,
+.slide-fade-exit-to {
+    transform: translateY(10px);
+    opacity: 0;
+}
+
+svg.toc-active {
+    transform: rotate(180deg);
+}