basecoat/docs/_includes/sidebar.njk

<header class="flex flex-col gap-2 p-2">
  {% set trigger %}
    <div class="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg">
      {% lucide "gallery-vertical-end", { "class": "size-4" } %}
    </div>
    <div class="grid flex-1 text-left text-sm leading-tight">
      <span class="truncate font-medium">Acme Inc</span>
      <span class="truncate text-xs">Enterprise</span>
    </div>
    {% lucide "chevrons-up-down", { "class": "ml-auto" } %}
  {% endset %}
  {% call popover(
    id="demo-sidebar-dropdown-org",
    trigger=trigger,
    trigger_attrs={"class": "btn-ghost p-2 h-12 w-full justify-start"},
    content_attrs={"data-side": "right"}
  ) %}
    Something
  {% endcall %}

  <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">Pages</h2>
    <ul class="flex flex-col gap-1">
      <li>
        <a
          href="#alert-dialog"
          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"
        >
          {% lucide "house" %}
          Homepage
        </a>
      </li>
      <li>
        <a
          href="#alert-dialog"
          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"
        >
          {% lucide "book-open" %}
          Docs
        </a>
      </li>
      <li>
        <a
          href="#alert-dialog"
          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"
        >
          {% lucide "github" %}
          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">
      {% 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" }
      ] %}
      {% for component in components %}
        <li>
          <a
            href="#{{ 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"
          >
            {{ 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 %}

  {% set trigger %}
    <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>
    {% lucide "chevrons-up-down", { "class": "text-muted-foreground ml-auto" } %}
  {% endset %}

  {% call popover(
    id="demo-sidebar-dropdown-account",
    trigger=trigger,
    trigger_attrs={"class": "btn-ghost h-12 justify-start p-2 w-full"},
    content_attrs={"class": "min-w-56", "data-side": "right", "data-align": "end"}
  ) %}
    {{ profile_menu | safe }}
  {% endcall %}
</footer>