@props([
    'title' => 'Sidebar',
])

<aside
    :class="sidebarToggle ? 'translate-x-0 lg:w-[90px]' : '-translate-x-full'"
{{--    sidebar--}}
    class="fixed left-0 top-0 z-9999 flex h-screen w-[260px] flex-col overflow-y-hidden border-r border-gray-200 bg-white px-3 duration-300 ease-linear dark:border-gray-800 dark:bg-black lg:static lg:translate-x-0"
{{--    @click.outside="sidebarToggle = false"--}}
    {{ $attributes }}
>
    <x-sidebar.header />

    <div class="no-scrollbar flex flex-col overflow-y-auto duration-300 ease-linear">
        <!-- Sidebar Menu -->
        <nav x-data="{selected: $persist('Dashboard')}">
            {{ $slot }}
        </nav>
        <!-- Sidebar Menu End -->
    </div>
</aside>