<flux:sidebar sticky stashable
    class="bg-zinc-50 dark:bg-zinc-900 border-r rtl:border-r-0 rtl:border-l border-zinc-200 dark:border-zinc-700">
    <flux:sidebar.toggle class="lg:hidden" icon="x-mark" />
    <flux:brand logo="{{ asset('assets/images/logo.png') }}" name="Yadi Parfum" class="px-2 dark:hidden" />
    <flux:brand logo="{{ asset('assets/images/dark-logo.png') }}" name="Yadi Parfum" class="px-2 hidden dark:flex" />
    <flux:navlist variant="outline">
        <div class="mb-1">
            <div class="grid gap-2">
                <flux:navlist.item icon="squares-plus" href="{{ route('member.overview') }}"
                    :current="request()->routeIs('member.overview')" wire:navigate>
                    Ringkasan</flux:navlist.item>
                <flux:navlist.item icon="ticket" href="{{ route('member.voucher') }}"
                    :current="request()->routeIs('member.voucher')" wire:navigate>
                    Voucher</flux:navlist.item>
                <flux:navlist.item icon="user-circle" href="{{ route('member.membership') }}"
                    :current="request()->routeIs('member.membership')" wire:navigate>
                    Membership</flux:navlist.item>
                <flux:navlist.item icon="check-badge" href="{{ route('member.redeem_point') }}"
                    :current="request()->routeIs('member.redeem_point')" wire:navigate>
                    Penukaran Poin</flux:navlist.item>

                @if (auth()->user()->permission('view studio overview'))
                    <div class="mt-3 mb-1">
                        <div class="text-zinc-500 dark:text-gray-300 text-sm/6">Pintu Dorameon</div>
                        <div class="grid gap-2">
                            <flux:navlist.item icon="arrow-right-end-on-rectangle"
                                href="{{ route('studio.dashboard.overview') }}" wire:navigate>
                                Studio</flux:navlist.item>
                        </div>
                    </div>
                @endif
            </div>
        </div>
    </flux:navlist>
</flux:sidebar>
