docs: add interactions to sidebar

ubermanu · Jun 1, 2023 · a19d36d · a19d36d
1 parent 4aa3526
commit a19d36d
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 24 deletions.
diff --git a/src/routes/(docs)/+layout.server.ts b/src/routes/(docs)/+layout.server.ts
@@ -4,21 +4,29 @@ import path from 'node:path'
 import type { LayoutServerLoad } from './$types.js'
 
 export const load: LayoutServerLoad = async () => {
-  const __dirname = path.dirname(import.meta.url.replace('file://', ''))
+  return {
+    sidebar: [
+      await getSidebarSection('Components', 'component'),
+      await getSidebarSection('Interactions', 'interaction'),
+    ],
+  }
+}
 
-  // Get the list of components in the component folder
-  const folders = await fs.readdir(path.join(__dirname, './component'))
+const getSidebarSection = async (title: string, sub: string) => {
+  const __dirname = path.dirname(import.meta.url.replace('file://', ''))
+  const folders = await fs.readdir(path.join(__dirname, './' + sub))
 
-  const components = folders.map((folder) => {
+  const entries = folders.map((folder) => {
     return {
       name: folder.replace(/-/g, ' ').replace(/\w\S*/g, (txt) => {
         return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase()
       }),
-      url: `${base}/component/${folder}`,
+      url: `${base}/${sub}/${folder}`,
     }
   })
 
   return {
-    components,
+    title,
+    entries,
   }
 }
diff --git a/src/routes/(docs)/Sidebar.svelte b/src/routes/(docs)/Sidebar.svelte
@@ -2,7 +2,7 @@
   import { page } from '$app/stores'
   import { X } from 'lucide-svelte'
 
-  $: components = $page?.data?.components ?? []
+  $: sidebar = $page?.data?.sidebar ?? []
 </script>
 
 <div class="sidebar">
@@ -17,22 +17,29 @@
     </button>
   </div>
 
-  <nav aria-label="Components">
-    <ul class="space-y-2">
-      {#each components as { name, url }}
-        <li class="w-full">
-          <a
-            href={url}
-            aria-current={$page.url.pathname === url ? 'page' : undefined}
-            class="block w-full rounded-lg px-4 py-2 transition-colors duration-200 hover:bg-neutral-200 dark:hover:bg-neutral-800"
-            class:is-active={$page.url.pathname === url}
-          >
-            {name}
-          </a>
-        </li>
-      {/each}
-    </ul>
-  </nav>
+  {#each sidebar as section}
+    <nav class="mb-4">
+      <h3
+        class="p-2 text-xl font-bold capitalize text-neutral-600 dark:text-neutral-400"
+      >
+        {section.title}
+      </h3>
+      <ul class="space-y-1">
+        {#each section.entries as { name, url }}
+          <li class="w-full">
+            <a
+              href={url}
+              aria-current={$page.url.pathname === url ? 'page' : undefined}
+              class="block w-full rounded-lg px-4 py-2 text-sm transition-colors duration-200 hover:bg-neutral-200 dark:hover:bg-neutral-800"
+              class:is-active={$page.url.pathname === url}
+            >
+              {name}
+            </a>
+          </li>
+        {/each}
+      </ul>
+    </nav>
+  {/each}
 </div>
 
 <style lang="postcss">

diff --git a/src/routes/ToggleSidebar.svelte b/src/routes/ToggleSidebar.svelte
@@ -8,7 +8,7 @@
   })
 </script>
 
-{#if $page.data.components}
+{#if $page.data.sidebar}
   <button
     class="cursor-pointer rounded p-2 lg:hidden"
     on:click={() => {