120 lines
7.7 KiB
PHP
120 lines
7.7 KiB
PHP
{{--resources/views/components/partials/header.blade.php--}}
|
|
<div
|
|
class="#sticky top-0 w-full border-b hr rounded-lg">
|
|
|
|
<header id="header" class="header w-full rounded-r-2xl rounded-l-none">
|
|
<nav class="flex h-[71px] #h-[74px] items-center justify-between #p-3">
|
|
<div class="#flex-1 md:w-3/5 w-full">
|
|
<div class="relative flex items-center gap-5">
|
|
<button class="sidebar-toggle translate-0 right-5 block sm:hidden text-white/60 hover:text-white text-2xl">
|
|
<i class="ph ph-list"></i>
|
|
</button>
|
|
|
|
{{-- <button id="sidebar-toggle-btn"--}}
|
|
{{-- class="action-button sidebar-toggle flex items-center justify-center p-1.5 shadow-2xl rounded">--}}
|
|
{{-- <svg class="size-5 group-[.expanded]/side:rotate-180"--}}
|
|
{{-- fill="none" stroke="currentColor" stroke-width="1.5"--}}
|
|
{{-- viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">--}}
|
|
{{-- <path stroke-linecap="round" stroke-linejoin="round"--}}
|
|
{{-- d="M9 5l7 7-7 7"></path>--}}
|
|
{{-- </svg>--}}
|
|
{{-- </button>--}}
|
|
<div class="flex items-center gap-3">
|
|
<h1 class="font-bold text-2xl">@yield('header_title')</h1>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center justify-end gap-2 w-full max-w-96">
|
|
<button
|
|
id="openSearchPaletteBtn"
|
|
type="button"
|
|
class="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-3 py-1.5
|
|
text-white/75 hover:text-white hover:border-white/20"
|
|
title="Suche öffnen"
|
|
aria-label="Suche öffnen"
|
|
wire:click="$dispatch('openModal',{component:'ui.search.modal.search-palette-modal'})"
|
|
>
|
|
<i class="ph ph-magnifying-glass text-[16px]"></i>
|
|
<span id="searchShortcutKbd"
|
|
class="rounded-md bg-white/5 border border-white/10 px-1.5 py-0.5 text-[11px] leading-none">
|
|
<!-- wird per JS gesetzt -->
|
|
</span>
|
|
</button>
|
|
<button onclick="Livewire.dispatch('openModal',{component:'ui.domain.modal.domain-create-modal'})">
|
|
<i class="ph-duotone ph-globe-hemisphere-east"></i>
|
|
</button>
|
|
|
|
@foreach($header as $section)
|
|
<div class="#modal-button #relative #mr-2">
|
|
<div class="#p-1.5">
|
|
@if(!$section['image'])
|
|
<div x-data="{ openMessages: false }" class="relative flex items-center">
|
|
<button @click="openMessages = !openMessages" class="btn-ghost text-base !p-2"><i class="ph-duotone ph-bell #mr-1"></i></button>
|
|
<div
|
|
x-show="openMessages"
|
|
@click.away="openMessages = false"
|
|
x-cloak
|
|
class="popup absolute top-16 right-0 w-48"
|
|
x-transition:enter="transition ease-out duration-100"
|
|
x-transition:enter-start="opacity-0 transform scale-95"
|
|
x-transition:enter-end="opacity-100 transform scale-100"
|
|
x-transition:leave="transition ease-in duration-75"
|
|
x-transition:leave-start="opacity-100 transform scale-100"
|
|
x-transition:leave-end="opacity-0 transform scale-95"
|
|
>
|
|
<div class="flex items-center justify-center h-40">
|
|
Keine Nachrichten
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@else
|
|
<div x-data="{ openMenu: false }" class="relative flex items-center">
|
|
<button @click="openMenu = !openMenu"
|
|
class="flex items-center 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 ml-2 text-gray-500 transform transition-transform duration-200"
|
|
:class="{'rotate-180': open}"
|
|
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-16 right-0 w-48"
|
|
x-transition:enter="transition ease-out duration-100"
|
|
x-transition:enter-start="opacity-0 transform scale-95"
|
|
x-transition:enter-end="opacity-100 transform scale-100"
|
|
x-transition:leave="transition ease-in duration-75"
|
|
x-transition:leave-start="opacity-100 transform scale-100"
|
|
x-transition:leave-end="opacity-0 transform scale-95"
|
|
>
|
|
@foreach($section['sub'] as $sub)
|
|
<a href="{{ route($sub['route']) }}"
|
|
class="block px-4 py-2 text-xs #text-gray-700 #hover:bg-gray-100 #hover:text-black #hover:bg-gradient-to-r #hover:from-[rgba(var(--accent))] #hover:to-transparent">
|
|
<div class="flex items-center gap-3">
|
|
<span>Logo</span>
|
|
{{-- <span><x-dynamic-component :component="$sub['icon']"--}}
|
|
{{-- class="!size-4"/></span>--}}
|
|
<span>{{ $sub['title'] }}</span>
|
|
</div>
|
|
</a>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</nav>
|
|
</header>
|
|
</div>
|