<header
    class="border-grid sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
    <div class="w-full mx-auto max-w-7xl">
        <div
            class="xl:px-6 h-14 w-full max-w-8xl mx-auto px-4 border-x border-grid flex flex-row justify-between items-center">
            <div class="mr-4 hidden md:flex">
                <a href="/" class="mr-4 flex items-center gap-2 lg:mr-6">
                    {% include "components/icon.html" %}
                    <h1 class="hidden lg:inline-block font-bold text-md">
                        {% if config.theme.title %}
                        {{ config.theme.title }}
                        {% else %}
                        {{ config.site_name }}
                        {% endif %}
                    </h1>
                </a>
            </div>
            <button
                class="cursor-pointer inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 hover:text-accent-foreground py-2 -ml-2 mr-2 h-8 w-8 px-0 text-base hover:bg-transparent focus-visible:bg-transparent focus-visible:ring-0 focus-visible:ring-offset-0 md:hidden"
                type="button" aria-haspopup="dialog" aria-expanded="false" aria-controls="radix-:R15u6ja:"
                data-state="closed" onclick="onMobileMenuButtonClick(event)">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                    stroke="currentColor" class="!size-6">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 9h16.5m-16.5 6.75h16.5"></path>
                </svg>
                <span class="sr-only">Toggle Menu</span>
            </button>
            <div class="flex flex-1 items-center justify-between gap-2 md:justify-end">
                {% include "templates/search.html" %}
                <div class="flex items-center gap-0.5">
                    {% if config.repo_url %}
                    <button
                        class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 hover:bg-accent hover:text-accent-foreground h-8 w-8 px-0"><a
                            target="_blank" rel="noreferrer" href="{{ config.repo_url }}">
                            {% if config.repo_name == 'gitlab' %}{% include "icons/gitlab.svg" %}
                            <span class="sr-only">Gitlab</span>
                            {% else %}
                            {% include "icons/github.svg" %}
                            <span class="sr-only">GitHub</span>
                            {% endif %}
                        </a>
                    </button>
                    {% endif %}
                    <button
                        class="cursor-pointer inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 hover:bg-accent hover:text-accent-foreground py-2 group/toggle h-8 w-8 px-0"
                        onclick="onThemeSwitch(event)">
                        {% with override_class="h-4 w-4 dark:hidden not-dark:block" %}
                        {% include "icons/moon.svg" %}
                        {% endwith %}
                        {% with override_class="h-4 w-4 not-dark:hidden dark:block" %}
                        {% include "icons/sun.svg" %}
                        {% endwith %}
                        <span class="sr-only">Toggle theme</span>
                    </button>
                </div>
            </div>
        </div>
    </div>
</header>