75 lines
4.1 KiB
PHP
75 lines
4.1 KiB
PHP
<nav x-data="{ mobileMenuIsOpen: false }" x-on:click.away="mobileMenuIsOpen = false"
|
|
class="drop-shadow-sm flex items-center justify-between bg-white border-b border-outline px-7 py-3 mb-10 dark:border-outline-dark dark:bg-surface-dark-alt">
|
|
<!-- Brand Logo -->
|
|
@include('layouts.logo')
|
|
|
|
<!-- Desktop Menu -->
|
|
<dev class="hidden items-center gap-4 md:flex">
|
|
<x-filament::link href="/" color="white" icon="heroicon-o-home">
|
|
Home
|
|
</x-filament::link>
|
|
<x-filament::link href="/nutzwerte" color="white" icon="heroicon-o-building-office-2">
|
|
Nutzwerte
|
|
</x-filament::link>
|
|
{{-- <x-filament::link href="/programm" color="white" icon="heroicon-o-calculator">
|
|
Programm
|
|
</x-filament::link> --}}
|
|
<x-filament::link href="/impressum" color="white" icon="heroicon-o-calendar-date-range">
|
|
Impressum
|
|
</x-filament::link>
|
|
|
|
<x-filament::button href="/app" tag="a" size="sm">
|
|
Anmelden
|
|
</x-filament::button>
|
|
{{-- <x-filament::button href="/app/register" tag="a" size="sm" color="gray">
|
|
Registrieren
|
|
</x-filament::button> --}}
|
|
|
|
<!-- Theme Toggle -->
|
|
<div class="pl-4">
|
|
<x-filament::icon-button icon="heroicon-m-sun" color="gray" class="hidden dark:block"
|
|
x-on:click=toggle_theme(); />
|
|
<x-filament::icon-button icon="heroicon-o-moon" color="gray" class="block dark:hidden"
|
|
x-on:click=toggle_theme(); />
|
|
</div>
|
|
</dev>
|
|
<!-- Mobile Menu Button -->
|
|
<button x-on:click="mobileMenuIsOpen = !mobileMenuIsOpen" x-bind:aria-expanded="mobileMenuIsOpen"
|
|
x-bind:class="mobileMenuIsOpen ? 'fixed top-6 right-6 z-20' : null" type="button"
|
|
class="flex text-on-surface dark:text-on-surface-dark md:hidden" aria-label="mobile menu"
|
|
aria-controls="mobileMenu">
|
|
<svg x-cloak x-show="!mobileMenuIsOpen" xmlns="http://www.w3.org/2000/svg" fill="none" aria-hidden="true"
|
|
viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="size-6">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
|
|
</svg>
|
|
<svg x-cloak x-show="mobileMenuIsOpen" xmlns="http://www.w3.org/2000/svg" fill="none" aria-hidden="true"
|
|
viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="size-6">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
<!-- Mobile Menu -->
|
|
<ul x-cloak x-show="mobileMenuIsOpen"
|
|
x-transition:enter="transition motion-reduce:transition-none ease-out duration-300"
|
|
x-transition:enter-start="-translate-y-full" x-transition:enter-end="translate-y-0"
|
|
x-transition:leave="transition motion-reduce:transition-none ease-out duration-300"
|
|
x-transition:leave-start="translate-y-0" x-transition:leave-end="-translate-y-full" id="mobileMenu"
|
|
class="fixed max-h-svh overflow-y-auto inset-x-0 top-0 z-10 flex flex-col divide-y divide-outline rounded-b-radius border-b border-outline bg-surface-alt px-6 pb-6 pt-20 dark:divide-outline-dark dark:border-outline-dark dark:bg-surface-dark-alt md:hidden">
|
|
|
|
<li class="py-4"><a href="/"
|
|
class="w-full text-lg font-bold text-primary focus:underline dark:text-primary-dark"
|
|
aria-current="page">Home</a></li>
|
|
<li class="py-4"><a href="/nutzwerte"
|
|
class="w-full text-lg font-medium text-on-surface focus:underline dark:text-on-surface-dark">Nutzwerte</a>
|
|
</li>
|
|
<li class="py-4"><a href="/programm"
|
|
class="w-full text-lg font-medium text-on-surface focus:underline dark:text-on-surface-dark">Programm</a>
|
|
</li>
|
|
<li class="py-4"><a href="/impressum"
|
|
class="w-full text-lg font-medium text-on-surface focus:underline dark:text-on-surface-dark">Impressum</a>
|
|
</li>
|
|
<li class="py-4"><a href="/app"
|
|
class="w-full text-lg font-medium text-on-surface focus:underline dark:text-on-surface-dark">Login</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|