Sebastian Krüger
94b9134f8e
All checks were successful
Deploy Theme / deploy (push) Successful in 14s
34 lines
1.7 KiB
Handlebars
34 lines
1.7 KiB
Handlebars
<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>
|