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

{% from "command.njk" import command_dialog %}

{% set docsMenu = docs.menu if docs and docs.menu else menu %}
{% set commandMenu = docsMenu | commandMenu(collections) %}
{{ command_dialog(id="command-search", items=commandMenu, placeholder="Search the docs...") }}
<script>
  document.addEventListener('keydown', (event) => {
    if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === 'k') {
      event.preventDefault();
      const dialog = document.getElementById('command-search');
      if (!dialog) return;
      if (dialog.open) dialog.close();
      else {
        dialog.showModal();
        dialog.querySelector('header input')?.focus();
      }
    }
  });
</script>

<div class="flex h-14 w-full items-center gap-2 px-4">
  <button
    type="button"
    onclick="document.dispatchEvent(new CustomEvent('basecoat:sidebar'))"
    aria-label="Toggle sidebar"
    data-tooltip="Toggle sidebar"
    data-side="bottom"
    data-align="start"
    class="btn-sm-icon-ghost mr-auto size-7 -ml-1.5"
  >
    {% lucide "panel-left" %}
  </button>

  <button
    type="button"
    class="relative text-muted-foreground bg-background dark:bg-input/30 border-input hidden h-8 w-full min-w-0 max-w-72 items-center rounded-md border px-3 py-1 gap-x-2 text-sm outline-none cursor-text focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] md:flex"
    onclick="document.getElementById('command-search').showModal(); document.getElementById('command-search').querySelector('header input')?.focus();"
  >
    {% lucide "search", { "class": "size-4" } %}
    Search the docs...
    <kbd class="kbd ml-auto -mr-1.5">⌘K</kbd>
  </button>

  <select class="select h-8 leading-none" id="theme-select" aria-label="Theme">
    <option value="">Default</option>
    <option value="claude">Claude</option>
    <option value="doom-64">Doom 64</option>
    <option value="supabase">Supabase</option>
  </select>
  <script>
    (() => {
      const themeSelect = document.getElementById('theme-select');
      const storedTheme = localStorage.getItem('themeVariant');
      if (themeSelect && storedTheme) themeSelect.value = storedTheme;
      themeSelect?.addEventListener('change', () => {
        const newTheme = themeSelect.value;
        document.documentElement.classList.forEach(c => {
          if (c.startsWith('theme-')) document.documentElement.classList.remove(c);
        });
        if (newTheme) {
          document.documentElement.classList.add(`theme-${newTheme}`);
          localStorage.setItem('themeVariant', newTheme);
        } else {
          localStorage.removeItem('themeVariant');
        }
      });
    })();
  </script>

  <select class="select h-8 leading-none" id="style-select" aria-label="Style">
    <option value="vega">Vega</option>
    <option value="nova">Nova</option>
    <option value="maia">Maia</option>
    <option value="lyra">Lyra</option>
    <option value="mira">Mira</option>
    <option value="luma">Luma</option>
    <option value="sera">Sera</option>
    <option value="rhea">Rhea</option>
  </select>
  <script>
    (() => {
      const styleSelect = document.getElementById('style-select');
      const styleLink = document.getElementById('style-variant-stylesheet');
      const applyStyle = (styleName) => {
        const nextStyle = styleName || 'nova';
        document.documentElement.dataset.styleVariant = nextStyle;
        if (styleLink) styleLink.href = `/assets/styles-${nextStyle}.css`;
      };

      const storedStyle = localStorage.getItem('styleVariant') || 'nova';
      if (styleSelect) styleSelect.value = storedStyle;
      applyStyle(storedStyle);

      styleSelect?.addEventListener('change', () => {
        const newStyle = styleSelect.value || 'nova';
        applyStyle(newStyle);
        localStorage.setItem('styleVariant', newStyle);
      });
    })();
  </script>

  <button
    type="button"
    aria-label="Toggle dark mode"
    data-tooltip="Toggle dark mode"
    data-side="bottom"
    onclick="document.dispatchEvent(new CustomEvent('basecoat:theme'))"
    class="btn-icon-outline size-8"
  >
    <span class="hidden dark:block">{% lucide "sun" %}</span>
    <span class="block dark:hidden">{% 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>