palina-theme/partials/header.hbs

<header 
    class="sticky top-0 z-40 w-full transition-all duration-500 ease-in-out border-b py-5"
    :class="isSticky ? 'bg-[var(--bg-primary)]/80 backdrop-blur-md shadow-lg border-[var(--bg-tertiary)]' : 'bg-[var(--bg-primary)] border-[var(--bg-tertiary)]/30 shadow-none'">
    <div class="container mx-auto flex items-center justify-between px-5">
        <a href="{{@site.url}}" class="flex title-font font-medium items-center text-[var(--text-primary)]" @click.stop>
            {{#if @site.logo}}
                <img src="{{@site.logo}}" alt="{{@site.title}}" class="h-10 w-auto site-logo">
            {{else}}
                {{> "icons/logo" class="h-10 w-auto site-logo"}}
            {{/if}}
        </a>

        <div class="flex items-center space-x-4">
            <nav class="hidden md:flex items-center space-x-4">
                {{navigation type="primary"}}
            </nav>

            {{!-- Theme Toggle - Visible on both mobile and desktop --}}
            <button @click="theme = (theme === 'dark' ? 'light' : 'dark')" class="p-2 rounded-full text-[var(--text-secondary)] hover:text-[var(--brand-primary)] transition-colors duration-200">
                <div x-show="theme === 'dark'">
                    {{> "icons/sun" class="w-6 h-6"}}
                </div>
                <div x-show="theme === 'light'" x-cloak>
                    {{> "icons/moon" class="w-6 h-6"}}
                </div>
            </button>

            <button @click.stop="mobileMenuOpen = true" class="md:hidden p-2 rounded-full text-[var(--text-secondary)] hover:text-[var(--brand-primary)] transition-colors duration-200">
                {{> "icons/menu" class="w-6 h-6"}}
            </button>
        </div>
    </div>
</header>