103 lines
5.7 KiB
PHP
103 lines
5.7 KiB
PHP
{{-- resources/views/components/partials/sidebar.blade.php --}}
|
|
|
|
<div
|
|
id="sidebar"
|
|
class="fixed top-0 left-0 z-50 #drop-shadow-2xl
|
|
-translate-x-full sm:translate-x-0
|
|
h-full w-full">
|
|
<div class="p-2.5 w-full h-full">
|
|
<div class="side-bg flex flex-col rounded-lg shadow-2xl h-full border-white/10
|
|
bg-gradient-to-b from-[#0f172a]/90 via-[#1e293b]/70 to-[#0d9488]/30
|
|
backdrop-blur-xl border border-white/10">
|
|
|
|
{{-- Header --}}
|
|
<div class="relative h-16 border-b hr px-2 flex items-center justify-between">
|
|
<a href="{{ route('ui.dashboard') }}"
|
|
class="sidebar-link group relative flex flex-row items-center #mx-auto sm:mx-0">
|
|
<span class="text-gray p-1.5">
|
|
<x-icons.icon-logo-circle class="!size-9"/>
|
|
</span>
|
|
|
|
<span class="sidebar-label text-xl ml-2 truncate tracking-wide font-bai transition-all">
|
|
<x-icons.icon-logo-text class="!size-35 fill-white"/>
|
|
</span>
|
|
</a>
|
|
|
|
<button class="sidebar-toggle absolute translate-0 right-5 block sm:hidden text-white/60 hover:text-white text-2xl"><i
|
|
class="ph ph-x"></i>
|
|
</button>
|
|
</div>
|
|
|
|
{{-- Navigation --}}
|
|
|
|
<nav class="flex-1 overflow-y-auto my-3 px-2.5 space-y-4 no-scrollbar text-[rgba(var(--gray))]">
|
|
<ul class="space-y-3">
|
|
@foreach(config('menu.sidebar') as $section)
|
|
@php
|
|
$activeInside = collect($section['items'] ?? [])->contains(
|
|
fn($i) => isset($i['route']) && request()->routeIs($i['route'])
|
|
);
|
|
$secIcon = $section['icon'] ?? 'ph-dots-three-outline';
|
|
@endphp
|
|
|
|
|
|
<li class="space-y-1" x-data="{ open: {{ $activeInside ? 'true' : 'false' }} }">
|
|
<button
|
|
type="button"
|
|
class="js-sec-toggle w-full flex items-center gap-4 px-2.5 py-2 rounded-lg hover:bg-white/5 text-slate-300 transition-colors"
|
|
@click="(!$root.closest('#sidebar').classList.contains('u-collapsed')) && (open = !open)">
|
|
<i class="ph-duotone {{ $secIcon }} text-xl shrink-0 opacity-80"></i>
|
|
<span class="sidebar-label text-xs font-semibold tracking-wide">
|
|
{{ $section['label'] ?? 'Sektion' }}
|
|
</span>
|
|
<i class="sidebar-caret ph-duotone ph-caret-down ml-auto text-sm transition-transform"
|
|
:class="{ '-rotate-180': open }" x-cloak></i>
|
|
</button>
|
|
|
|
<ul x-show="open && !$root.closest('#sidebar').classList.contains('u-collapsed')"
|
|
x-collapse x-cloak data-submenu class="pl-2 pr-1 space-y-1">
|
|
@foreach(($section['items'] ?? []) as $item)
|
|
@php
|
|
$active = isset($item['route']) && request()->routeIs($item['route']);
|
|
$itemIcon = $item['icon'] ?? 'ph-dot-outline';
|
|
@endphp
|
|
<li>
|
|
{{-- <a href="{{ isset($item['route']) ? route($item['route']) : '#' }}"--}}
|
|
<a href="#"
|
|
class="sidebar-link group relative flex items-center gap-2 px-2 py-2 rounded-lg
|
|
border border-transparent transition-colors
|
|
hover:bg-gradient-to-t hover:from-white/10 hover:to-transparent
|
|
{{ $active ? 'bg-gradient-to-t from-white/10 to-transparent !border !border-white/10' : '' }}">
|
|
<i class="ph-duotone {{ $itemIcon }} text-base opacity-80"></i>
|
|
<span
|
|
class="sidebar-label text-xs truncate tracking-wide {{ $active ? 'font-semibold' : '' }}">
|
|
{{ $item['label'] ?? 'Eintrag' }}
|
|
</span>
|
|
</a>
|
|
</li>
|
|
@endforeach
|
|
</ul>
|
|
</li>
|
|
@endforeach
|
|
</ul>
|
|
</nav>
|
|
|
|
{{-- Footer Toggle (Desktop/Tablet) --}}
|
|
<div class="p-5 border-t hr flex justify-center items-center">
|
|
<div class="sidebar-label text-[10px] text-slate-300/70 whitespace-nowrap">
|
|
<span class="text-xs text-white/40">{{ config('app.name') }} | v{{ config('app.version') }}</span>
|
|
</div>
|
|
|
|
{{-- <button type="button"--}}
|
|
{{-- class="action-button sidebar-toggle flex items-center justify-center p-2 shadow-2xl rounded"--}}
|
|
{{-- aria-label="Sidebar ein/ausklappen">--}}
|
|
{{-- <svg class="size-6" 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>
|
|
</div>
|
|
</div>
|
|
</div>
|