121 lines
6.4 KiB
PHP
121 lines
6.4 KiB
PHP
{{--resources/views/components/partials/header.blade.php--}}
|
|
<div class="w-full border-b hr">
|
|
<header id="header" class="header w-full rounded-r-2xl rounded-l-none">
|
|
<nav class="flex h-[71px] items-center justify-between gap-3 px-4">
|
|
|
|
{{-- Links: Toggle + Seitentitel --}}
|
|
<div class="flex min-w-0 flex-1 items-center gap-3">
|
|
<button class="sidebar-toggle shrink-0 text-white/60 hover:text-white text-2xl">
|
|
<i class="ph ph-list"></i>
|
|
</button>
|
|
<h1 class="truncate font-bold text-xl sm:text-2xl">@yield('header_title')</h1>
|
|
</div>
|
|
|
|
{{-- Rechts: Suche + Aktionen --}}
|
|
<div class="flex shrink-0 items-center gap-1.5 sm:gap-2">
|
|
|
|
{{-- Suchbutton --}}
|
|
<button
|
|
id="openSearchPaletteBtn"
|
|
type="button"
|
|
onclick="Livewire.dispatch('openModal',{component:'ui.search.modal.search-palette-modal'})"
|
|
class="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-2.5 py-1.5 text-white/75 hover:text-white hover:border-white/20 sm:px-3"
|
|
title="Suche öffnen"
|
|
aria-label="Suche öffnen"
|
|
>
|
|
<i class="ph ph-magnifying-glass text-base"></i>
|
|
<span id="searchShortcutKbd"
|
|
class="hidden sm:inline-block rounded-md bg-white/5 border border-white/10 px-1.5 py-0.5 text-[11px] leading-none">
|
|
</span>
|
|
</button>
|
|
|
|
{{-- Domain erstellen --}}
|
|
<button
|
|
type="button"
|
|
onclick="Livewire.dispatch('openModal',{component:'ui.domain.modal.domain-create-modal'})"
|
|
class="btn-ghost text-lg !p-2"
|
|
title="Domain erstellen"
|
|
>
|
|
<i class="ph-duotone ph-globe-hemisphere-east"></i>
|
|
</button>
|
|
|
|
@foreach($header as $section)
|
|
@if(!$section['image'])
|
|
{{-- Benachrichtigungen --}}
|
|
<div x-data="{ openMessages: false }" class="relative flex items-center">
|
|
<button
|
|
@click="openMessages = !openMessages"
|
|
class="btn-ghost text-base !p-2"
|
|
title="Benachrichtigungen"
|
|
>
|
|
<i class="ph-duotone ph-bell"></i>
|
|
</button>
|
|
<div
|
|
x-show="openMessages"
|
|
@click.away="openMessages = false"
|
|
x-cloak
|
|
class="popup absolute top-[calc(100%+0.5rem)] right-0 w-56"
|
|
x-transition:enter="transition ease-out duration-100"
|
|
x-transition:enter-start="opacity-0 scale-95"
|
|
x-transition:enter-end="opacity-100 scale-100"
|
|
x-transition:leave="transition ease-in duration-75"
|
|
x-transition:leave-start="opacity-100 scale-100"
|
|
x-transition:leave-end="opacity-0 scale-95"
|
|
>
|
|
<div class="flex items-center justify-center h-40 text-sm text-white/50">
|
|
Keine Nachrichten
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@else
|
|
{{-- Avatar-Menü --}}
|
|
<div x-data="{ openMenu: false }" class="relative flex items-center">
|
|
<button
|
|
@click="openMenu = !openMenu"
|
|
class="flex items-center gap-1.5 focus:outline-none"
|
|
>
|
|
<img
|
|
class="size-8 rounded-full object-cover shadow-2xl"
|
|
src="https://i.pravatar.cc/100"
|
|
alt="Avatar"
|
|
/>
|
|
<svg
|
|
class="size-4 text-white/40 transition-transform duration-200"
|
|
:class="{ 'rotate-180': openMenu }"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
>
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
|
|
</svg>
|
|
</button>
|
|
<div
|
|
x-show="openMenu"
|
|
@click.away="openMenu = false"
|
|
x-cloak
|
|
class="popup absolute top-[calc(100%+0.5rem)] right-0 w-48"
|
|
x-transition:enter="transition ease-out duration-100"
|
|
x-transition:enter-start="opacity-0 scale-95"
|
|
x-transition:enter-end="opacity-100 scale-100"
|
|
x-transition:leave="transition ease-in duration-75"
|
|
x-transition:leave-start="opacity-100 scale-100"
|
|
x-transition:leave-end="opacity-0 scale-95"
|
|
>
|
|
@foreach($section['sub'] as $sub)
|
|
<a href="{{ route($sub['route']) }}" class="block px-4 py-2 text-xs hover:bg-white/5">
|
|
<div class="flex items-center gap-3">
|
|
<i class="ph {{ $sub['icon'] ?? 'ph-circle' }} text-sm text-white/50"></i>
|
|
<span>{{ $sub['title'] }}</span>
|
|
</div>
|
|
</a>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
@endif
|
|
@endforeach
|
|
|
|
</div>
|
|
</nav>
|
|
</header>
|
|
</div>
|