{{--<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>