basecoat/docs/_includes/partials/sidebar.njk

{% set components = [
  { "id": "accordion", "name": "Accordion" },
  { "id": "alert", "name": "Alert" },
  { "id": "alert-dialog", "name": "Alert Dialog" },
  { "id": "avatar", "name": "Avatar" },
  { "id": "badge", "name": "Badge" },
  { "id": "breadcrumb", "name": "Breadcrumb" },
  { "id": "button", "name": "Button" },
  { "id": "card", "name": "Card" },
  { "id": "checkbox", "name": "Checkbox" },
  { "id": "combobox", "name": "Combobox" },
  { "id": "dialog", "name": "Dialog" },
  { "id": "dropdown-menu", "name": "Dropdown Menu" },
  { "id": "form", "name": "Form" },
  { "id": "input", "name": "Input" },
  { "id": "label", "name": "Label" },
  { "id": "pagination", "name": "Pagination" },
  { "id": "popover", "name": "Popover" },
  { "id": "radio-group", "name": "Radio Group" },
  { "id": "select", "name": "Select" },
  { "id": "skeleton", "name": "Skeleton" },
  { "id": "slider", "name": "Slider" },
  { "id": "switch", "name": "Switch" },
  { "id": "table", "name": "Table" },
  { "id": "tabs", "name": "Tabs" },
  { "id": "textarea", "name": "Textarea" },
  { "id": "toast", "name": "Toast" },
  { "id": "tooltip", "name": "Tooltip" }
] %}

<header class="flex flex-col gap-2 p-2">
  <a href="/" class="btn-ghost p-2 h-12 w-full justify-start">
    <div class="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg">
      {% lucide "paint-roller", { "class": "size-4" } %}
    </div>
    <div class="grid flex-1 text-left text-sm leading-tight">
      <span class="truncate font-medium">Basecoat</span>
      <span class="truncate text-xs">v0.0.1</span>
    </div>
  </a>
  <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>
</header>
<section class="flex flex-1 flex-col gap-2 overflow-y-auto scrollbar">
  <nav aria-label="Pages navigation" class="flex flex-col p-2">
    <h2 class="text-sidebar-foreground/70 flex h-8 items-center px-2 text-xs font-medium">Getting Started</h2>
    <ul class="flex flex-col gap-1">
      <li>
        <a
          href="/"
          class="h-8 flex items-center gap-2 rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0"
        >
         Introduction
        </a>
      </li>
      <li>
        <a
          href="/installation"
          class="h-8 flex items-center gap-2 rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0"
        >
         Installation
        </a>
      </li>
      <li>
        <a
          href="/kitchen-sink"
          class="h-8 flex items-center gap-2 rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0"
        >
          Kitchen sink
        </a>
      </li>
      <li>
        <a
          href="/theming"
          class="h-8 flex items-center gap-2 rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0"
        >
         Theming
        </a>
      </li>
      <li>
        <a
          href="https://github.com/hunvreus/basecoat"
          target="_blank"
          class="h-8 flex items-center gap-2 rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0"
        >
          GitHub
          {% lucide "arrow-up-right", { "class": "text-muted-foreground size-3.5 ml-auto" } %}
        </a>
      </li>
    </ul>
  </nav>
  <nav aria-label="Components navigation" class="flex flex-col p-2">
    <h2 class="text-sidebar-foreground/70 flex h-8 items-center px-2 text-xs font-medium">Components</h2>
    <ul class="flex flex-col gap-1">
      {% for component in components %}
        <li>
          <a
            href="/components/{{ component.id }}"
            class="h-8 flex items-center gap-2 rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0"
            hx-boost="true"
            hx-select="#content"
            hx-target="#content"
            hx-swap="outerHTML"
          >
            {{ component.name }}
          </a>
        </li>
      {% endfor %}
    </ul>
  </nav>
</section>
<footer class="flex flex-col gap-2 p-2">
  {% set profile_menu %}
    <div class="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
      <img src="https://avatar.vercel.sh/ronan_berder" class="size-8 shrink-0 rounded-full" alt="Ronan Berder"/>
      <div class="grid flex-1 text-left text-sm leading-tight">
        <span class="truncate font-medium">hunvreus</span>
        <span class="text-muted-foreground truncate text-xs">hunvreus@example.com</span>
      </div>
    </div>
    <hr role="separator">
    <nav role="menu">
      <button type="button" role="menuitem">
        {% lucide "star" %}
        Upgrade to Pro
      </button>
      <hr role="separator">
      <button type="button" role="menuitem">
        {% lucide "user" %}
        Account
      </button>
      <button type="button" role="menuitem">
        {% lucide "credit-card" %}
        Billing
      </button>
      <button type="button" role="menuitem">
        {% lucide "bell" %}
        Notifications
      </button>
      <hr role="separator">
      <button type="button" role="menuitem">
        {% lucide "log-out" %}
        Signout
      </button>
    </nav>
  {% endset %}
</footer>