161 lines
8.2 KiB
HTML
161 lines
8.2 KiB
HTML
<header class="fixed top-0 left-0 right-0 z-50 transition-all duration-300">
|
|
<!-- Status Bar -->
|
|
{{ $status := partial "check-open-status.html" . }}
|
|
<div id="status-bar" class="{{ if $status.isOpen }}bg-status-green{{ else }}bg-status-red{{ end }} transition-colors duration-300">
|
|
<div class="container mx-auto px-4">
|
|
<div class="flex justify-center items-center h-8 sm:h-10">
|
|
<div id="status-text" class="text-xs sm:text-sm text-white font-medium">
|
|
{{ if $status.isOpen }}
|
|
{{ i18n "open" }}
|
|
{{ else }}
|
|
{{ i18n "closed" }}
|
|
{{ end }}
|
|
</div>
|
|
<div class="ml-2 text-xs sm:text-sm text-white">
|
|
(<span id="current-time">{{ now.Format "15:04" }}</span> {{ i18n "time_suffix" }})
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Navigation -->
|
|
<nav class="bg-white dark:bg-pizza-darker shadow-md">
|
|
<div class="container mx-auto px-4">
|
|
<div class="flex justify-between items-center h-16 sm:h-20">
|
|
<!-- Logo -->
|
|
<div class="flex-shrink-0">
|
|
<a href="{{ .Site.Home.RelPermalink }}" class="flex items-center">
|
|
<img src="/images/logo.webp"
|
|
alt="{{ .Site.Title }}"
|
|
class="h-12 sm:h-16 w-auto transition-transform duration-300 hover:scale-105">
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Desktop Navigation Links -->
|
|
<div class="hidden md:flex items-center space-x-8">
|
|
{{ range .Site.Menus.main }}
|
|
<a href="{{ .URL | relLangURL }}"
|
|
class="text-gray-700 dark:text-gray-100 hover:text-pizza-red transition-colors duration-300">
|
|
{{ .Name }}
|
|
</a>
|
|
{{ end }}
|
|
</div>
|
|
|
|
<!-- Language Switcher - Desktop -->
|
|
<div class="hidden md:flex items-center space-x-4">
|
|
{{ if eq .Site.Language.Lang "de" }}
|
|
<a href="{{ relLangURL "en" }}"
|
|
class="text-gray-700 dark:text-gray-100 hover:text-pizza-red transition-colors duration-300">
|
|
English
|
|
</a>
|
|
{{ else }}
|
|
<a href="/"
|
|
class="text-gray-700 dark:text-gray-100 hover:text-pizza-red transition-colors duration-300">
|
|
Deutsch
|
|
</a>
|
|
{{ end }}
|
|
</div>
|
|
|
|
<!-- Dark mode toggle - Desktop -->
|
|
<div class="hidden md:flex items-center">
|
|
<button id="darkModeToggle"
|
|
class="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-800 focus:outline-none">
|
|
<!-- Sun icon -->
|
|
<svg class="h-6 w-6 text-gray-700 dark:text-gray-200 hidden dark:block"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor">
|
|
<path stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
|
|
</svg>
|
|
<!-- Moon icon -->
|
|
<svg class="h-6 w-6 text-gray-700 dark:text-gray-200 block dark:hidden"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor">
|
|
<path stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Mobile Controls -->
|
|
<div class="md:hidden flex items-center space-x-3">
|
|
<!-- Dark mode toggle - Mobile -->
|
|
<button id="darkModeToggle"
|
|
onclick="toggleTheme()"
|
|
class="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-800 focus:outline-none">
|
|
<!-- Sun icon -->
|
|
<svg class="h-6 w-6 text-gray-700 dark:text-gray-200 hidden dark:block"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor">
|
|
<path stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
|
|
</svg>
|
|
<!-- Moon icon -->
|
|
<svg class="h-6 w-6 text-gray-700 dark:text-gray-200 block dark:hidden"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor">
|
|
<path stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
|
|
</svg>
|
|
</button>
|
|
|
|
<!-- Mobile Menu Button -->
|
|
<button type="button"
|
|
id="mobile-menu-button"
|
|
class="text-gray-700 dark:text-gray-100 hover:text-pizza-red p-2">
|
|
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Mobile Menu -->
|
|
<div id="mobile-menu" class="md:hidden hidden">
|
|
<div class="px-2 pt-2 pb-3 space-y-1 bg-white dark:bg-pizza-darker border-t border-gray-200 dark:border-gray-700">
|
|
{{ range .Site.Menus.main }}
|
|
<a href="{{ .URL | relLangURL }}"
|
|
class="block px-3 py-2.5 text-base font-medium text-gray-700 dark:text-gray-100 hover:text-pizza-red transition-colors duration-300">
|
|
{{ .Name }}
|
|
</a>
|
|
{{ end }}
|
|
|
|
<!-- Language Options in Mobile Menu -->
|
|
<div class="border-t border-gray-200 dark:border-gray-700 mt-2 pt-2">
|
|
{{ if eq .Site.Language.Lang "de" }}
|
|
<a href="{{ relLangURL "en" }}"
|
|
class="block px-3 py-2.5 text-base font-medium text-gray-700 dark:text-gray-100 hover:text-pizza-red transition-colors duration-300">
|
|
English
|
|
</a>
|
|
{{ else }}
|
|
<a href="/"
|
|
class="block px-3 py-2.5 text-base font-medium text-gray-700 dark:text-gray-100 hover:text-pizza-red transition-colors duration-300">
|
|
Deutsch
|
|
</a>
|
|
{{ end }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</header>
|
|
|
|
<!-- Mobile Menu JavaScript -->
|
|
<script>
|
|
document.getElementById('mobile-menu-button').addEventListener('click', function() {
|
|
const mobileMenu = document.getElementById('mobile-menu');
|
|
mobileMenu.classList.toggle('hidden');
|
|
});
|
|
</script>
|