Almost done with documentation

docs/src/_includes/layouts/base.njk

@@ -4,19 +4,37 @@
   <!-- Theme -->
   <script>
   function isDark() {
-    return localStorage.getItem('theme') === 'dark' || (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches);
+    return localStorage.getItem('darkMode') === 'dark' || (!localStorage.getItem('darkMode') && window.matchMedia('(prefers-color-scheme: dark)').matches);
   }
 
   if (isDark()) {
     document.documentElement.classList.add('dark');
   }
 
+  if (localStorage.getItem('themeVariant')) {
+    document.documentElement.classList.add(`theme-${localStorage.getItem('themeVariant')}`);
+  }
+
   document.addEventListener('alpine:init', () => {
-    Alpine.store('theme', {
+    Alpine.store('darkMode', {
       isDark: isDark(),
       toggle() {
         this.isDark = document.documentElement.classList.toggle('dark');
-        localStorage.setItem('theme', this.isDark ? 'dark' : 'light');
+        localStorage.setItem('darkMode', this.isDark ? 'dark' : 'light');
+      }
+    });
+
+    Alpine.store('themeVariant', {
+      name: localStorage.getItem('themeVariant'),
+      setThemeVariant(name) {
+        this.name = name;
+        localStorage.setItem('themeVariant', name);
+        document.documentElement.classList.forEach(className => {
+          if (className.startsWith('theme-')) {
+            document.documentElement.classList.remove(className);
+          }
+        });
+        document.documentElement.classList.add(`theme-${name}`);
       }
     });
   });
@@ -82,11 +100,11 @@
 {% include "partials/sidebar.njk" %}
 
 <main id="content">
-  <header class="bg-background sticky inset-x-0 top-0 isolate z-20 flex shrink-0 items-center gap-2 border-b z-10">
+  <header class="bg-background sticky inset-x-0 top-0 isolate flex shrink-0 items-center gap-2 border-b z-10">
     {% include "partials/header.njk" %}
   </header>
 
-  <div class="p-4">
+  <div class="p-6 md:p-8 xl:p-12">
     {{ content | safe }}
   </div>
 </main>

docs/src/_includes/layouts/page.njk

@@ -2,7 +2,7 @@
 layout: layouts/base.njk
 ---
 
-<main class="mx-auto relative py-6 lg:gap-10 lg:py-8 flex w-full max-w-screen-lg">
+<main class="mx-auto relative flex w-full max-w-screen-lg gap-10">
   <div class="mx-auto w-full max-w-screen-md">
     <header class="space-y-2">
       <h1 class="text-3xl font-semibold tracking-tight">{{ title }}</h1>
@@ -14,26 +14,8 @@ layout: layouts/base.njk
   </div>
   {% if toc %}
     <div class="hidden text-sm xl:block w-full max-w-[300px]">
-      <nav class="sticky top-22 space-y-2 [&_ul]:m-0 [&_ul]:list-none [&_ul_ul]:pl-4 [&_li]:mt-0 [&_li]:pt-2 [&_a]:inline-block [&_a]:no-underline [&_a]:transition-colors [&_a]:hover:text-foreground [&_a]:text-muted-foreground">
-        <h4 class="font-medium">On This Page</h4>
-        {% if toc %}
-          {% macro renderToc(items) %}
-            {% if items and items.length %}
-              <ul>
-              {% for item in items %}
-                <li>
-                  <a href="#{{ item.id }}">{{ item.label }}</a>
-                  {% if item.children and item.children.length %}
-                    {{ renderToc(item.children) }}
-                  {% endif %}
-                </li>
-              {% endfor %}
-              </ul>
-            {% endif %}
-          {% endmacro %}
-          {{ renderToc(toc) }}
-        {% endif %}
-      </nav>
+      {% from "macros/toc.njk" import toc_nav %}
+      {{ toc_nav(toc) }}
     </div>
   {% endif %}
 </main>

docs/src/_includes/macros/toc.njk

@@ -0,0 +1,20 @@
+{% macro toc_nav(items=[]) %}
+<nav class="sticky top-22 space-y-2 [&_ul]:m-0 [&_ul]:list-none [&_ul_ul]:pl-4 [&_li]:mt-0 [&_li]:pt-2 [&_a]:inline-block [&_a]:no-underline [&_a]:transition-colors [&_a]:hover:text-foreground [&_a]:text-muted-foreground">
+  <h4 class="font-medium">On This Page</h4>
+  {% macro toc_list(items=[]) %}
+    {% if items and items.length %}
+      <ul>
+      {% for item in items %}
+        <li>
+          <a href="#{{ item.id }}">{{ item.label }}</a>
+          {% if item.children and item.children.length %}
+            {{ toc_list(item.children) }}
+          {% endif %}
+        </li>
+      {% endfor %}
+      </ul>
+    {% endif %}
+  {% endmacro %}
+  {{ toc_list(items) }}
+</nav>
+{% endmacro %}

docs/src/_includes/partials/header.njk

@@ -16,21 +16,28 @@
   >
     {% lucide "panel-left" %}
   </button>
-  <select class="select h-8 leading-none">
-    <option value="light">Default</option>
-    <option value="light">Other</option>
+  <select
+    class="select h-8 leading-none"
+    x-init
+    @change="$store.themeVariant.setThemeVariant($event.target.value)"
+    :value="$store.themeVariant.name"
+  >
+    <option value="">Default</option>
+    <option value="claude">Claude</option>
+    <option value="doom-64">Doom 64</option>
+    <option value="supabase">Supabase</option>
   </select>
   <button
     type="button"
-    aria-label="Toggle theme"
-    data-tooltip="Toggle theme"
+    :aria-label="$store.darkMode.isDark ? 'Switch to light mode' : 'Switch to dark mode'"
+    :data-tooltip="$store.darkMode.isDark ? 'Light mode' : 'Dark mode'"
     data-side="bottom"
     data-align="end"
     class="btn-icon-outline size-8"
     x-init
-    @click="$store.theme.toggle()"
+    @click="$store.darkMode.toggle()"
   >
-    <span x-show="$store.theme.isDark">{% lucide "sun" %}</span>
-    <span x-show="!$store.theme.isDark">{% lucide "moon" %}</span>
+    <span x-show="$store.darkMode.isDark">{% lucide "sun" %}</span>
+    <span x-show="!$store.darkMode.isDark">{% lucide "moon" %}</span>
   </button>
 </div>

docs/src/_includes/partials/kitchen-sink/accordion.njk

@@ -1,6 +1,9 @@
-<section id="accordion" class="w-full rounded-lg border scroll-mt-16">
-  <header class="border-b px-4 py-3">
+<section id="accordion"  class="w-full rounded-lg border scroll-mt-14">
+  <header class="border-b px-4 py-3 flex items-center justify-between">
     <h2 class="text-sm font-medium">Accordion</h2>
+    <a href="/components/accordion" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation">
+      {% lucide "book-open", { "class": "size-4" }   %}
+    </a>
   </header>
   <div class="p-4">
     <div class="group grid w-full max-w-xl gap-4">

docs/src/_includes/partials/kitchen-sink/alert-dialog.njk

@@ -1,8 +1,11 @@
 {% from "dialog.njk" import dialog %}
 
-<section id="alert-dialog" class="w-full rounded-lg border scroll-mt-16">
-  <header class="border-b px-4 py-3">
+<section id="alert-dialog"  class="w-full rounded-lg border scroll-mt-14">
+  <header class="border-b px-4 py-3 flex items-center justify-between">
     <h2 class="text-sm font-medium">Alert Dialog</h2>
+    <a href="/components/alert-dialog" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation">
+      {% lucide "book-open", { "class": "size-4" }   %}
+    </a>
   </header>
   <div class="p-4">
     <div class="flex flex-col gap-4">

docs/src/_includes/partials/kitchen-sink/alert.njk

@@ -1,6 +1,9 @@
-<section id="alert" class="w-full rounded-lg border scroll-mt-16">
-  <header class="border-b px-4 py-3">
+<section id="alert"  class="w-full rounded-lg border scroll-mt-14">
+  <header class="border-b px-4 py-3 flex items-center justify-between">
     <h2 class="text-sm font-medium">Alert</h2>
+    <a href="/components/alert" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation">
+      {% lucide "book-open", { "class": "size-4" }   %}
+    </a>
   </header>
   <div class="p-4">
     <div class="grid max-w-xl items-start gap-4">

docs/src/_includes/partials/kitchen-sink/avatar.njk

@@ -1,6 +1,9 @@
-<section id="avatar" class="w-full rounded-lg border scroll-mt-16">
-  <header class="border-b px-4 py-3">
+<section id="avatar"  class="w-full rounded-lg border scroll-mt-14">
+  <header class="border-b px-4 py-3 flex items-center justify-between">
     <h2 class="text-sm font-medium">Avatar</h2>
+    <a href="/components/avatar" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation">
+      {% lucide "book-open", { "class": "size-4" }   %}
+    </a>
   </header>
   <div class="p-4">
     <div class="flex flex-row flex-wrap items-center gap-4">

docs/src/_includes/partials/kitchen-sink/badge.njk

@@ -1,6 +1,9 @@
-<section id="badge" class="w-full rounded-lg border scroll-mt-16">
-  <header class="border-b px-4 py-3">
+<section id="badge"  class="w-full rounded-lg border scroll-mt-14">
+  <header class="border-b px-4 py-3 flex items-center justify-between">
     <h2 class="text-sm font-medium">Badge</h2>
+    <a href="/components/badge" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation">
+      {% lucide "book-open", { "class": "size-4" }   %}
+    </a>
   </header>
   <div class="p-4">
     <div class="flex flex-col gap-2">

docs/src/_includes/partials/kitchen-sink/breadcrumb.njk

@@ -1,8 +1,11 @@
 {% from "popover.njk" import popover %}
 
-<section id="breadcrumb" class="w-full rounded-lg border scroll-mt-16">
-  <header class="border-b px-4 py-3">
+<section id="breadcrumb"  class="w-full rounded-lg border scroll-mt-14">
+  <header class="border-b px-4 py-3 flex items-center justify-between">
     <h2 class="text-sm font-medium">Breadcrumb</h2>
+    <a href="/components/breadcrumb" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation">
+      {% lucide "book-open", { "class": "size-4" }   %}
+    </a>
   </header>
   <div class="p-4">
     <ol class="text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5">

docs/src/_includes/partials/kitchen-sink/button.njk

@@ -1,6 +1,9 @@
-<section id="button" class="w-full rounded-lg border scroll-mt-16">
-  <header class="border-b px-4 py-3">
+<section id="button"  class="w-full rounded-lg border scroll-mt-14">
+  <header class="border-b px-4 py-3 flex items-center justify-between">
     <h2 class="text-sm font-medium">Button</h2>
+    <a href="/components/button" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation">
+      {% lucide "book-open", { "class": "size-4" }   %}
+    </a>
   </header>
   <div class="p-4">
     <div class="flex flex-col gap-6">

docs/src/_includes/partials/kitchen-sink/card.njk

@@ -1,6 +1,9 @@
-<section id="card" class="w-full rounded-lg border scroll-mt-16">
-  <header class="border-b px-4 py-3">
+<section id="card"  class="w-full rounded-lg border scroll-mt-14">
+  <header class="border-b px-4 py-3 flex items-center justify-between">
     <h2 class="text-sm font-medium">Card</h2>
+    <a href="/components/card" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation">
+      {% lucide "book-open", { "class": "size-4" }   %}
+    </a>
   </header>
   <div class="p-4">
     <div class="flex flex-col items-start gap-4">

docs/src/_includes/partials/kitchen-sink/checkbox.njk

@@ -1,6 +1,9 @@
-<section id="checkbox" class="w-full rounded-lg border scroll-mt-16">
-  <header class="border-b px-4 py-3">
+<section id="checkbox"  class="w-full rounded-lg border scroll-mt-14">
+  <header class="border-b px-4 py-3 flex items-center justify-between">
     <h2 class="text-sm font-medium">Checkbox</h2>
+    <a href="/components/checkbox" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation">
+      {% lucide "book-open", { "class": "size-4" }   %}
+    </a>
   </header>
   <div class="p-4">
     <div class="flex flex-col gap-6 max-w-lg">

docs/src/_includes/partials/kitchen-sink/combobox.njk

@@ -1,8 +1,11 @@
 {% from "select.njk" import select %}
 
-<section id="combobox" class="w-full rounded-lg border scroll-mt-16">
-  <header class="border-b px-4 py-3">
+<section id="combobox"  class="w-full rounded-lg border scroll-mt-14">
+  <header class="border-b px-4 py-3 flex items-center justify-between">
     <h2 class="text-sm font-medium">Combobox</h2>
+    <a href="/components/combobox" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation">
+      {% lucide "book-open", { "class": "size-4" }   %}
+    </a>
   </header>
   <div class="p-4">
     <div class="flex flex-wrap items-start gap-4">

docs/src/_includes/partials/kitchen-sink/dialog.njk

@@ -1,8 +1,11 @@
 {% from "dialog.njk" import dialog %}
 
-<section id="dialog" class="w-full rounded-lg border scroll-mt-16">
-  <header class="border-b px-4 py-3">
+<section id="dialog"  class="w-full rounded-lg border scroll-mt-14">
+  <header class="border-b px-4 py-3 flex items-center justify-between">
     <h2 class="text-sm font-medium">Dialog</h2>
+    <a href="/components/dialog" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation">
+      {% lucide "book-open", { "class": "size-4" }   %}
+    </a>
   </header>
   <div class="p-4">
     <div class="flex flex-wrap items-center gap-4">

docs/src/_includes/partials/kitchen-sink/dropdown-menu.njk

@@ -1,8 +1,11 @@
 {% from "dropdown-menu.njk" import dropdown_menu %}
 
-<section id="dropdown-menu" class="w-full rounded-lg border scroll-mt-16">
-  <header class="border-b px-4 py-3">
+<section id="dropdown-menu"  class="w-full rounded-lg border scroll-mt-14">
+  <header class="border-b px-4 py-3 flex items-center justify-between">
     <h2 class="text-sm font-medium">Dropdown Menu</h2>
+    <a href="/components/dropdown-menu" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation">
+      {% lucide "book-open", { "class": "size-4" }   %}
+    </a>
   </header>
   <div class="p-4">
     <div class="flex flex-wrap items-start gap-4">

docs/src/_includes/partials/kitchen-sink/form.njk

@@ -1,6 +1,9 @@
-<section id="form" class="w-full rounded-lg border scroll-mt-16">
-  <header class="border-b px-4 py-3">
+<section id="form"  class="w-full rounded-lg border scroll-mt-14">
+  <header class="border-b px-4 py-3 flex items-center justify-between">
     <h2 class="text-sm font-medium">Form</h2>
+    <a href="/components/form" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation">
+      {% lucide "book-open", { "class": "size-4" }   %}
+    </a>
   </header>
   <div class="p-4">
     <form class="form grid w-full max-w-sm gap-6">

docs/src/_includes/partials/kitchen-sink/input.njk

@@ -1,6 +1,9 @@
-<section id="input" class="w-full rounded-lg border scroll-mt-16">
-  <header class="border-b px-4 py-3">
+<section id="input"  class="w-full rounded-lg border scroll-mt-14">
+  <header class="border-b px-4 py-3 flex items-center justify-between">
     <h2 class="text-sm font-medium">Input</h2>
+    <a href="/components/input" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation">
+      {% lucide "book-open", { "class": "size-4" }   %}
+    </a>
   </header>
   <div class="p-4">
     <div class="flex flex-col gap-y-4">

docs/src/_includes/partials/kitchen-sink/label.njk

@@ -1,6 +1,9 @@
-<section id="label" class="w-full rounded-lg border scroll-mt-16">
-  <header class="border-b px-4 py-3">
+<section id="label"  class="w-full rounded-lg border scroll-mt-14">
+  <header class="border-b px-4 py-3 flex items-center justify-between">
     <h2 class="text-sm font-medium">Label</h2>
+    <a href="/components/label" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation">
+      {% lucide "book-open", { "class": "size-4" }   %}
+    </a>
   </header>
   <div class="p-4">
     <div class="flex flex-col gap-y-4">

docs/src/_includes/partials/kitchen-sink/pagination.njk

@@ -1,6 +1,9 @@
-<section id="pagination" class="w-full rounded-lg border scroll-mt-16">
-  <header class="border-b px-4 py-3">
+<section id="pagination"  class="w-full rounded-lg border scroll-mt-14">
+  <header class="border-b px-4 py-3 flex items-center justify-between">
     <h2 class="text-sm font-medium">Pagination</h2>
+    <a href="/components/pagination" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation">
+      {% lucide "book-open", { "class": "size-4" }   %}
+    </a>
   </header>
   <div class="p-4">
     <div class="inline-flex">

docs/src/_includes/partials/kitchen-sink/popover.njk

@@ -1,8 +1,11 @@
 {% from "popover.njk" import popover %}
 
-<section id="popover" class="w-full rounded-lg border scroll-mt-16">
-  <header class="border-b px-4 py-3">
+<section id="popover"  class="w-full rounded-lg border scroll-mt-14">
+  <header class="border-b px-4 py-3 flex items-center justify-between">
     <h2 class="text-sm font-medium">Popover</h2>
+    <a href="/components/popover" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation">
+      {% lucide "book-open", { "class": "size-4" }   %}
+    </a>
   </header>
   <div class="p-4">
     {% call popover(

docs/src/_includes/partials/kitchen-sink/radio-group.njk

@@ -1,6 +1,9 @@
-<section id="radio-group" class="w-full rounded-lg border scroll-mt-16">
-  <header class="border-b px-4 py-3">
+<section id="radio-group"  class="w-full rounded-lg border scroll-mt-14">
+  <header class="border-b px-4 py-3 flex items-center justify-between">
     <h2 class="text-sm font-medium">Radio Group</h2>
+    <a href="/components/radio-group" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation">
+      {% lucide "book-open", { "class": "size-4" }   %}
+    </a>
   </header>
   <div class="p-4">
     <div class="flex flex-col gap-y-6">

docs/src/_includes/partials/kitchen-sink/select.njk

@@ -1,8 +1,11 @@
 {% from "select.njk" import select %}
 
-<section id="select" class="w-full rounded-lg border scroll-mt-16">
-  <header class="border-b px-4 py-3">
+<section id="select"  class="w-full rounded-lg border scroll-mt-14">
+  <header class="border-b px-4 py-3 flex items-center justify-between">
     <h2 class="text-sm font-medium">Select</h2>
+    <a href="/components/select" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation">
+      {% lucide "book-open", { "class": "size-4" }   %}
+    </a>
   </header>
   <div class="p-4 gap">
 

docs/src/_includes/partials/kitchen-sink/skeleton.njk

@@ -1,6 +1,9 @@
-<section id="skeleton" class="w-full rounded-lg border scroll-mt-16">
-  <header class="border-b px-4 py-3">
+<section id="skeleton"  class="w-full rounded-lg border scroll-mt-14">
+  <header class="border-b px-4 py-3 flex items-center justify-between">
     <h2 class="text-sm font-medium">Skeleton</h2>
+    <a href="/components/skeleton" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation">
+      {% lucide "book-open", { "class": "size-4" }   %}
+    </a>
   </header>
   <div class="p-4">
     <div class="flex flex-col gap-4">

docs/src/_includes/partials/kitchen-sink/slider.njk

@@ -1,6 +1,9 @@
-<section id="slider" class="w-full rounded-lg border scroll-mt-16">
-  <header class="border-b px-4 py-3">
+<section id="slider"  class="w-full rounded-lg border scroll-mt-14">
+  <header class="border-b px-4 py-3 flex items-center justify-between">
     <h2 class="text-sm font-medium">Slider</h2>
+    <a href="/components/slider" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation">
+      {% lucide "book-open", { "class": "size-4" }   %}
+    </a>
   </header>
   <div class="p-4">
     <div class="max-w-sm">

docs/src/_includes/partials/kitchen-sink/switch.njk

@@ -1,6 +1,9 @@
-<section id="switch" class="w-full rounded-lg border scroll-mt-16">
-  <header class="border-b px-4 py-3">
+<section id="switch"  class="w-full rounded-lg border scroll-mt-14">
+  <header class="border-b px-4 py-3 flex items-center justify-between">
     <h2 class="text-sm font-medium">Switch</h2>
+    <a href="/components/switch" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation">
+      {% lucide "book-open", { "class": "size-4" }   %}
+    </a>
   </header>
   <div class="p-4">
     <div class="inline-flex flex-col gap-y-6">

docs/src/_includes/partials/kitchen-sink/table.njk

@@ -1,6 +1,9 @@
-<section id="table" class="w-full rounded-lg border scroll-mt-16">
-  <header class="border-b px-4 py-3">
+<section id="table"  class="w-full rounded-lg border scroll-mt-14">
+  <header class="border-b px-4 py-3 flex items-center justify-between">
     <h2 class="text-sm font-medium">Table</h2>
+    <a href="/components/table" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation">
+      {% lucide "book-open", { "class": "size-4" }   %}
+    </a>
   </header>
   <div class="p-4">
 

docs/src/_includes/partials/kitchen-sink/tabs.njk

@@ -1,8 +1,11 @@
 {% from "tabs.njk" import tabs %}
 
-<section id="tabs" class="w-full rounded-lg border scroll-mt-16">
-  <header class="border-b px-4 py-3">
+<section id="tabs"  class="w-full rounded-lg border scroll-mt-14">
+  <header class="border-b px-4 py-3 flex items-center justify-between">
     <h2 class="text-sm font-medium">Tabs</h2>
+    <a href="/components/tabs" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation">
+      {% lucide "book-open", { "class": "size-4" }   %}
+    </a>
   </header>
   <div class="p-4">
     <div class="flex flex-col gap-6">

docs/src/_includes/partials/kitchen-sink/textarea.njk

@@ -1,6 +1,9 @@
-<section id="textarea" class="w-full rounded-lg border scroll-mt-16">
-  <header class="border-b px-4 py-3">
+<section id="textarea"  class="w-full rounded-lg border scroll-mt-14">
+  <header class="border-b px-4 py-3 flex items-center justify-between">
     <h2 class="text-sm font-medium">Textarea</h2>
+    <a href="/components/textarea" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation">
+      {% lucide "book-open", { "class": "size-4" }   %}
+    </a>
   </header>
   <div class="p-4">
     <div class="flex flex-col gap-y-10">

docs/src/_includes/partials/kitchen-sink/toast.njk

@@ -1,6 +1,9 @@
-<section id="toast" class="w-full rounded-lg border scroll-mt-16">
-  <header class="border-b px-4 py-3">
+<section id="toast"  class="w-full rounded-lg border scroll-mt-14">
+  <header class="border-b px-4 py-3 flex items-center justify-between">
     <h2 class="text-sm font-medium">Toast</h2>
+    <a href="/components/toast" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation">
+      {% lucide "book-open", { "class": "size-4" }   %}
+    </a>
   </header>
   <div class="p-4">
     <div class="flex flex-wrap items-center gap-2">

docs/src/_includes/partials/kitchen-sink/tooltip.njk

@@ -1,6 +1,9 @@
-<section id="tooltip" class="w-full rounded-lg border scroll-mt-16">
-  <header class="border-b px-4 py-3">
+<section id="tooltip"  class="w-full rounded-lg border scroll-mt-14">
+  <header class="border-b px-4 py-3 flex items-center justify-between">
     <h2 class="text-sm font-medium">Tooltip</h2>
+    <a href="/components/tooltip" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation">
+      {% lucide "book-open", { "class": "size-4" }   %}
+    </a>
   </header>
   <div class="p-4">
     <div class="flex flex-wrap items-center gap-4">

docs/src/_includes/partials/sidebar.njk

@@ -38,13 +38,13 @@
     <span class="truncate text-xs">v{{ pkg.version }}</span>
   </div>
 </a>
-<div class="flex flex-col gap-2 px-2 text-sm">
+{# <div class="flex flex-col gap-2 px-2 text-sm">
   <form class="form relative">
     <label for="search" class="sr-only">Search</label>
     <input type="text" placeholder="Search the docs..." class="h-8 w-full shadow-none pl-8">
     {% lucide "search", { "class": "pointer-events-none absolute top-1/2 left-2 size-4 -translate-y-1/2 opacity-50 select-none" } %}
   </form>
-</div>
+</div> #}
 {% endset %}
 
 {% set link_attrs = {
@@ -54,6 +54,7 @@
   "hx-swap": "outerHTML"
 } %}
 
+{% set icon_home %}{% lucide "house" %}{% endset %}
 {% set icon_info %}{% lucide "info" %}{% endset %}
 {% set icon_square_terminal %}{% lucide "square-terminal" %}{% endset %}
 {% set icon_layout_dashboard %}{% lucide "layout-dashboard" %}{% endset %}
@@ -61,10 +62,10 @@
 
 {% set menu = [
   { type: "group", label: "Getting started", items: [
-    { label: "Introduction", url: "/", icon: icon_info, current: true, attrs: link_attrs },
+    { label: "Introduction", url: "/introduction", icon: icon_info, attrs: link_attrs },
     { label: "Installation", url: "/installation", icon: icon_square_terminal, attrs: link_attrs },
     { label: "Kitchen sink", url: "/kitchen-sink", icon: icon_layout_dashboard, attrs: link_attrs },
-    { label: "GitHub", url: "https://github.com/hunvreus/basecoat", icon: icon_github, attrs: link_attrs }
+    { label: "GitHub", url: "https://github.com/hunvreus/basecoat", icon: icon_github, attrs: { "target": "_blank" } }
   ]},
   { type: 'group', label: 'Components', items: [
     { label: "Accordion", url: "/components/accordion", attrs: link_attrs },
@@ -121,6 +122,7 @@
         });
       }
     }",
+    "class": "scrollbar",
     "x-init": "updateCurrentPage()",
     "@htmx:pushed-into-history.window": "updateCurrentPage()"
   },