basecoat/docs/src/_includes/partials/header.njk

<div class="flex h-14 w-full items-center gap-2 px-4">
  <button
    type="button"
    aria-label="Hide sidebar"
    data-tooltip="Hide sidebar"
    :data-tooltip="sidebarOpen ? 'Hide sidebar' : 'Show sidebar'"
    data-side="bottom"
    data-align="start"
    class="btn-sm-icon-ghost mr-auto size-7 -ml-1.5"
    x-init
    x-data="{ sidebarOpen: true }"
    @click="
      sidebarOpen = !sidebarOpen;
      $dispatch('sidebar:toggle');
    "
  >
    {% lucide "panel-left" %}
  </button>
  <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="$store.darkMode.isDark ? 'Switch to light mode' : 'Switch to dark mode'"
    :data-tooltip="$store.darkMode.isDark ? 'Light mode' : 'Dark mode'"
    data-side="bottom"
    class="btn-icon-outline size-8"
    x-init
    @click="$store.darkMode.toggle()"
  >
    <span x-show="$store.darkMode.isDark">{% lucide "sun" %}</span>
    <span x-show="!$store.darkMode.isDark">{% lucide "moon" %}</span>
  </button>
  <a
    href="https://github.com/hunvreus/basecoat"
    class="btn-icon size-8"
    target="_blank"
    rel="noopener noreferrer"
    data-tooltip="GitHub repository"
    data-side="bottom"
    data-align="end"
  >
    {% lucide "github" %}
  </a>
</div>