250 lines
15 KiB
PHP
250 lines
15 KiB
PHP
{{--<div--}}
|
||
{{-- id="sidebar"--}}
|
||
{{-- class="group/side fixed z-50 drop-shadow-2xl--}}
|
||
{{-- -translate-x-full sm:translate-x-0--}}
|
||
{{-- sm:transition-[max-width,transform] sm:duration-300--}}
|
||
{{-- sm:block sm:max-w-sb-col lg:max-w-sb-exp--}}
|
||
{{-- group-[.t-collapsed]/side:sm:max-w-sb-col--}}
|
||
{{-- group-[.ut-expanded]/side:sm:max-w-sb-exp--}}
|
||
{{-- group-[.m-expanded]/side:translate-x-0 group-[.m-expanded]/side:block--}}
|
||
{{-- group-[.u-collapsed]/side:sm:max-w-sb-col--}}
|
||
{{-- h-full w-full">--}}
|
||
{{--<div class="#flex p-2.5 w-full max-w-7xl 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">--}}
|
||
|
||
{{-- <div class="relative items-center justify-center h-16 gap-2 border-b hr px-2">--}}
|
||
{{-- <button id="sidebar-toggle-btn"--}}
|
||
{{-- class="absolute top-1/2 -translate-y-1/2 action-button sidebar-toggle flex items-center justify-center p-2 shadow-2xl rounded z-10 sm:hidden">--}}
|
||
{{-- <svg class="size-6 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>--}}
|
||
|
||
{{-- <a href="{{ route('dashboard') }}"--}}
|
||
{{-- class="sidebar-link group relative flex flex-row items-center">--}}
|
||
{{-- <button class="w-full flex items-center sm:justify-normal justify-center rounded-md">--}}
|
||
{{-- <span class="text-gray #group-[.active]:text-primary p-2">--}}
|
||
{{-- <x-icons.icon-link class="!size-7 block"/>--}}
|
||
{{-- </span>--}}
|
||
{{-- <span--}}
|
||
{{-- class="sidebar-menu-text text-xs ml-2 truncate tracking-wide group-[.collapsed]/side:sm:hidden">--}}
|
||
{{-- <x-icons.icon-logo class="!size-28 max-h-16"/>--}}
|
||
{{-- </span>--}}
|
||
{{-- </button>--}}
|
||
{{-- </a>--}}
|
||
{{-- </div>--}}
|
||
{{-- <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">--}}
|
||
|
||
{{-- --}}{{-- Menu Sections --}}
|
||
|
||
{{-- @foreach($menu as $section)--}}
|
||
{{-- @php--}}
|
||
{{-- $isOpen = collect($section['items'] ?? [])->contains(--}}
|
||
{{-- fn($i) => isset($i['route']) && request()->routeIs($i['route'])--}}
|
||
{{-- );--}}
|
||
{{-- $secIcon = $section['icon'] ?? 'ph-dots-three-outline';--}}
|
||
|
||
{{-- $isOpen = collect($section['items'] ?? [])->contains(--}}
|
||
{{-- fn($i) => isset($i['route']) && request()->routeIs($i['route'])--}}
|
||
{{-- );--}}
|
||
{{-- @endphp--}}
|
||
{{-- <li class="Space-y-1" x-data="{ open: {{ $isOpen ? 'true' : 'false' }} }">--}}
|
||
{{-- <button type="button" @click="open = !open"--}}
|
||
{{-- class="w-full flex items-center gap-2 px-2 py-2 rounded-lg hover:bg-white/5 text-slate-300 transition-colors">--}}
|
||
{{-- <i class="ph-duotone {{ $secIcon }} text-xl shrink-0 opacity-80"></i>--}}
|
||
|
||
{{-- <span class="sidebar-menu-text text-xs font-semibold tracking-wide group-[.collapsed]/side:sm:hidden">--}}
|
||
{{-- {{ $section['label'] ?? 'Sektion' }}--}}
|
||
{{-- </span>--}}
|
||
{{-- <span class="sidebar-menu-text text-xs font-semibold tracking-wide--}}
|
||
{{-- group-[.u-collapsed]/side:hidden">--}}
|
||
{{-- {{ $section['label'] ?? 'Sektion' }}--}}
|
||
{{-- </span>--}}
|
||
|
||
{{-- <i class="ph-duotone ph-caret-down ml-auto text-sm transition-transform group-[.collapsed]/side:sm:hidden"--}}
|
||
{{-- :class="{ '-rotate-180': open }" x-cloak></i>--}}
|
||
{{-- </button>--}}
|
||
|
||
{{-- --}}{{-- WICHTIG: x-cloak + SSR hidden, wenn nicht offen --}}
|
||
{{-- <ul x-show="open && !$root.closest('#sidebar').classList.contains('u-collapsed')"--}}
|
||
{{-- x-collapse--}}
|
||
{{-- x-cloak--}}
|
||
{{-- >--}}
|
||
{{-- @foreach(($section['items'] ?? []) as $item)--}}
|
||
{{-- @php--}}
|
||
{{-- $active = isset($item['route']) && request()->routeIs($item['route']);--}}
|
||
{{-- $itemIcon = $item['icon'] ?? 'ph-dot-outline';--}}
|
||
{{-- @endphp--}}
|
||
|
||
{{-- <li>--}}
|
||
{{-- <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-menu-text text-xs truncate tracking-wide group-[.collapsed]/side:sm:hidden {{ $active ? 'font-semibold' : '' }}">--}}
|
||
{{-- {{ $item['label'] ?? 'Eintrag' }}--}}
|
||
{{-- </span>--}}
|
||
{{-- </a>--}}
|
||
{{-- </li>--}}
|
||
{{-- @endforeach--}}
|
||
{{-- </ul>--}}
|
||
{{-- </li>--}}
|
||
{{-- @endforeach--}}
|
||
|
||
{{-- </ul>--}}
|
||
{{-- </nav>--}}
|
||
{{-- <div class="p-3 border-t hr flex justify-end">--}}
|
||
{{-- <button id="sidebar-toggle-btn"--}}
|
||
{{-- class="action-button sidebar-toggle flex items-center justify-center p-2 shadow-2xl rounded">--}}
|
||
{{-- <svg class="size-6 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>--}}
|
||
{{-- </div>--}}
|
||
{{-- </div>--}}
|
||
{{--</div>--}}
|
||
|
||
{{-- 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">
|
||
|
||
{{-- Kleine, robuste Styleschicht – kein Tailwind-Plugin nötig --}}
|
||
{{-- <style>--}}
|
||
{{-- /* Basisbreite über CSS-Var – smooth per transition */--}}
|
||
{{-- #sidebar { --sb-w: 16rem; width: var(--sb-w); max-width: var(--sb-w); transition: width .2s ease, max-width .2s ease, transform .2s ease; }--}}
|
||
{{-- /* Desktop: 16rem Standard, im Rail 5.2rem */--}}
|
||
{{-- @media (min-width: 1024px) {--}}
|
||
{{-- #sidebar { --sb-w: 16rem; }--}}
|
||
{{-- #sidebar.u-collapsed { --sb-w: 5.2rem; }--}}
|
||
{{-- }--}}
|
||
{{-- /* Tablet: Standard Rail, Button kann erweitern */--}}
|
||
{{-- @media (min-width: 640px) and (max-width: 1023.98px) {--}}
|
||
{{-- #sidebar { --sb-w: 5.2rem; }--}}
|
||
{{-- #sidebar.ut-expanded { --sb-w: 16rem; }--}}
|
||
{{-- }--}}
|
||
{{-- /* Mobile: offcanvas via translate; JS toggelt translate-x-0/-translate-x-full */--}}
|
||
{{-- /* Rail-Modus: Text, Carets und Submenüs sicher verstecken */--}}
|
||
{{-- #sidebar.u-collapsed .sidebar-label { display: none !important; }--}}
|
||
{{-- #sidebar.u-collapsed .sidebar-caret { display: none !important; }--}}
|
||
{{-- #sidebar.u-collapsed [data-submenu] { display: none !important; }--}}
|
||
{{-- </style>--}}
|
||
|
||
<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">
|
||
|
||
{{-- Header --}}
|
||
<div class="relative h-16 border-b hr px-2 flex items-center">
|
||
{{-- Mobile Toggle (zeigt/verbirgt Sidebar auf <640px) --}}
|
||
{{-- <button--}}
|
||
{{-- type="button"--}}
|
||
{{-- class="absolute left-2 top-1/2 -translate-y-1/2 action-button sidebar-toggle flex items-center justify-center p-2 shadow-2xl rounded z-10 sm:hidden"--}}
|
||
{{-- aria-label="Sidebar umschalten">--}}
|
||
{{-- <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>--}}
|
||
|
||
<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-space">
|
||
MailWolt
|
||
{{-- optional: „MailWolt“/Brand --}}
|
||
</span>
|
||
</a>
|
||
</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-3 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-3 border-t hr flex justify-between items-center">
|
||
{{-- Version (z.B. aus config/app.php 'version' oder env) --}}
|
||
<div class="sidebar-label text-[10px] text-slate-300/70">
|
||
MailWolt <span class="font-semibold">{{ config('app.version', 'v1.0.0') }}</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>
|