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"> <!-- logo and title container-->
        <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">
        <button wire:click="selectPage('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>
        </button>

        <button wire:click="selectPage('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>
        </button>

        <div x-data="{ open: false }" 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-cloak class="pl-8 mt-1 flex flex-col space-y-1">
                <button wire:click="selectPage('card-member')" class="text-left hover:bg-gray-700 p-2 rounded">Card Member</button>
                <button wire:click="selectPage('locked-account')" class="text-left hover:bg-gray-700 p-2 rounded">Locked Accounts</button>
            </div>
        </div>
        
        <div x-data="{ open: false }" 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-cloak class="pl-8 mt-1 flex flex-col space-y-1">
                <button wire:click="selectPage('photo-slider')" class="text-left hover:bg-gray-700 p-2 rounded">Photo Sliders</button>
            </div>
        </div>

        <button wire:click="selectPage('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>
        </button>

        <button wire:click="selectPage('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>
        </button>

        <div x-data="{ open: false }" 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-cloak class="pl-8 mt-1 flex flex-col space-y-1">
                <button wire:click="selectPage('about-card-type')" class="text-left hover:bg-gray-700 p-2 rounded">Card Type</button>
                <button wire:click="selectPage('terms-and-privacy')" class="text-left hover:bg-gray-700 p-2 rounded">Terms & Privacy</button>
            </div>
        </div>

        <div x-data="{ open: false }" 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-cloak class="pl-8 mt-1 flex flex-col space-y-1">
                <button wire:click="selectPage('registration-report')" class="text-left hover:bg-gray-700 p-2 rounded">Registration Report</button>
                <button wire:click="selectPage('top-up-usage-report')" class="text-left hover:bg-gray-700 p-2 rounded">Top Up Usage Report</button>
                <button wire:click="selectPage('mobile-usage-report')" class="text-left hover:bg-gray-700 p-2 rounded">Mobile Usage Report</button>
                <button wire:click="selectPage('station-rating-report')" class="text-left hover:bg-gray-700 p-2 rounded">Station Rating Report</button>
            </div>
        </div>


        <button wire:click="selectPage('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>
        </button>

        <div x-data="{ open: false }" class="relative">
            <button @click.stop="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-cloak class="pl-8 mt-1 flex flex-col space-y-1">
                <button wire:click="selectPage('branch')" class="text-left hover:bg-gray-700 p-2 rounded">Branches</button>
                <button wire:click="selectPage('station')" class="text-left hover:bg-gray-700 p-2 rounded">Stations</button>
                <button wire:click="selectPage('fuel')" class="text-left hover:bg-gray-700 p-2 rounded">Fuels</button>
            </div>
        </div>

    </nav>
</div>