unioil-cms-fe/resources/views/livewire/navigation/drawer.blade.php

<div class="w-80 bg-gray-800 text-white flex-shrink-0">
    <div class="text-center mb-10">
        <img src="{{ asset('assets/unioil(orange).png') }}" alt="Unioil Logo" class="mx-auto max-w-md mt-5">
    </div>
    <nav class="flex flex-col space-y-2 p-4">

    <a wire:navigate href="/main/user-management" class="flex items-center gap-2 text-left hover:bg-gray-700 p-2 rounded">
            <x-heroicon-o-user class="w-5 h-5" />
            <span>User Management</span>
        </a>

        <a wire:navigate href="/main/notification" class="flex items-center gap-2 text-left hover:bg-gray-700 p-2 rounded">
            <x-heroicon-o-bell class="w-5 h-5" />
            <span>Notifications</span>
        </a>

        <!-- Dropdown: Member Management -->
        <div x-data="{ open: $persist(false).as('dropdown-member-management') }" class="relative">
            <button @click="open = !open" class="flex items-center justify-between gap-2 w-full text-left hover:bg-gray-700 p-2 rounded">
                <div class="flex items-center gap-2">
                    <x-heroicon-o-credit-card class="w-5 h-5" />
                    <span>Member Management</span>
                </div>
                <svg :class="{ 'rotate-180': open }" class="w-4 h-4 transform transition-transform duration-200" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                </svg>
            </button>
            <div x-show="open" x-transition x-cloak class="pl-8 mt-1 flex flex-col space-y-1">
                <a wire:navigate href="/main/member-management/card-member" class="text-left hover:bg-gray-700 p-2 rounded">Card Member</a>
                <a wire:navigate href="/main/member-management/locked-account" class="text-left hover:bg-gray-700 p-2 rounded">Locked Accounts</a>
            </div>
        </div>

        <!-- Dropdown: Home Page (Mobile) -->
        <div x-data="{ open: $persist(false).as('dropdown-home-page') }" class="relative">
            <button @click="open = !open" class="flex items-center justify-between gap-2 w-full text-left hover:bg-gray-700 p-2 rounded">
                <div class="flex items-center gap-2">
                    <x-heroicon-o-home class="w-5 h-5" />
                    <span>Home Page (Mobile)</span>
                </div>
                <svg :class="{ 'rotate-180': open }" class="w-4 h-4 transform transition-transform duration-200" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                </svg>
            </button>
            <div x-show="open" x-transition x-cloak class="pl-8 mt-1 flex flex-col space-y-1">
                <a wire:navigate href="/main/home-page-mobile/photo-slider" class="text-left hover:bg-gray-700 p-2 rounded">Photo Sliders</a>
            </div>
        </div>

        <a wire:navigate href="/main/promotion" class="flex items-center gap-2 text-left hover:bg-gray-700 p-2 rounded">
            <x-heroicon-o-tag class="w-5 h-5" />
            <span>Promotions</span>
        </a>

        <a wire:navigate href="/main/top-up" class="flex items-center gap-2 text-left hover:bg-gray-700 p-2 rounded">
            <x-heroicon-o-plus-circle class="w-5 h-5" />
            <span>Top Up</span>
        </a>

        <!-- Dropdown: About Us -->
        <div x-data="{ open: $persist(false).as('dropdown-about-us') }" class="relative">
            <button @click="open = !open" class="flex items-center justify-between gap-2 w-full text-left hover:bg-gray-700 p-2 rounded">
                <div class="flex items-center gap-2">
                    <x-heroicon-o-information-circle class="w-5 h-5" />
                    <span>About Us</span>
                </div>
                <svg :class="{ 'rotate-180': open }" class="w-4 h-4 transform transition-transform duration-200" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                </svg>
            </button>
            <div x-show="open" x-transition x-cloak class="pl-8 mt-1 flex flex-col space-y-1">
                <a wire:navigate href="/main/about-us/card-type" class="text-left hover:bg-gray-700 p-2 rounded">Card Type</a>
                <a wire:navigate href="/main/about-us/terms-and-privacy" class="text-left hover:bg-gray-700 p-2 rounded">Terms & Privacy</a>
            </div>
        </div>

        <!-- Dropdown: Reports -->
        <div x-data="{ open: $persist(false).as('dropdown-report') }" class="relative">
            <button @click="open = !open" class="flex items-center justify-between gap-2 w-full text-left hover:bg-gray-700 p-2 rounded">
                <div class="flex items-center gap-2">
                    <x-heroicon-o-document class="w-5 h-5" />
                    <span>Reports</span>
                </div>
                <svg :class="{ 'rotate-180': open }" class="w-4 h-4 transform transition-transform duration-200" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                </svg>
            </button>
            <div x-show="open" x-transition x-cloak class="pl-8 mt-1 flex flex-col space-y-1">
                <a wire:navigate href="/main/report/registration-report" class="text-left hover:bg-gray-700 p-2 rounded">Registration Report</a>
                <a wire:navigate href="/main/report/top-up-usage-report" class="text-left hover:bg-gray-700 p-2 rounded">Top Up Usage Report</a>
                <a wire:navigate href="/main/report/mobile-usage-report" class="text-left hover:bg-gray-700 p-2 rounded">Mobile Usage Report</a>
                <a wire:navigate href="/main/report/station-rating-report" class="text-left hover:bg-gray-700 p-2 rounded">Station Rating Report</a>
            </div>
        </div>

        <a wire:navigate href="/main/system-parameter" class="flex items-center gap-2 text-left hover:bg-gray-700 p-2 rounded">
            <x-heroicon-o-cog-6-tooth class="w-5 h-5" />
            <span>System Parameters</span>
        </a>

        <!-- Dropdown: Station Locator -->
        <div x-data="{ open: $persist(false).as('dropdown-station-locator') }" class="relative">
            <button @click="open = !open" class="flex items-center justify-between gap-2 w-full text-left hover:bg-gray-700 p-2 rounded">
                <div class="flex items-center gap-2">
                    <x-heroicon-o-map-pin class="w-5 h-5" />
                    <span>Station Locator</span>
                </div>
                <svg :class="{ 'rotate-180': open }" class="w-4 h-4 transform transition-transform duration-200" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                </svg>
            </button>
            <div x-show="open" x-transition x-cloak class="pl-8 mt-1 flex flex-col space-y-1">
                <a wire:navigate href="/main/station-locator/branch" class="text-left hover:bg-gray-700 p-2 rounded">Branches</a>
                <a wire:navigate href="/main/station-locator/station" class="text-left hover:bg-gray-700 p-2 rounded">Stations</a>
                <a wire:navigate href="/main/station-locator/fuel" class="text-left hover:bg-gray-700 p-2 rounded">Fuels</a>git asdasd
            </div>
        </div>
    </nav>
</div>