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

<div class="w-80 bg-slate-50 text-black flex-shrink-0">
    <div class="text-center mb-5">
        <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">
        @php
            function activeClass($path) {
                return request()->is($path) ? 'text-orange-500' : '';
            }
        @endphp

    <a wire:navigate href="/main/user-management" class="flex items-center gap-2 text-left hover:bg-orange-200 p-2 rounded {{ activeClass('main/user-management') }}">
        <x-heroicon-o-user class="w-5 h-5 {{ activeClass('main/user-management') }}" />
        <span class="{{ activeClass('main/user-management') }}">User Management</span>
    </a>

    <a wire:navigate href="/main/notification" class="flex items-center gap-2 text-left hover:bg-orange-200 p-2 rounded {{ activeClass('main/notification') }}">
        <x-heroicon-o-bell class="w-5 h-5 {{ activeClass('main/notification') }}" />
        <span class="{{ activeClass('main/notification') }}">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-orange-200 p-2 rounded">
            <div class="flex items-center gap-2">
                <x-heroicon-o-credit-card class="w-5 h-5 {{ activeClass('main/member-management*') }}" />
                <span class="{{ activeClass('main/member-management*') }}">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-orange-200 p-2 rounded {{ activeClass('main/member-management/card-member') }}">Card Member</a>
            <a wire:navigate href="/main/member-management/locked-account" class="text-left hover:bg-orange-200 p-2 rounded {{ activeClass('main/member-management/locked-account') }}">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-orange-200 p-2 rounded">
            <div class="flex items-center gap-2">
                <x-heroicon-o-home class="w-5 h-5 {{ activeClass('main/home-page-mobile*') }}" />
                <span class="{{ activeClass('main/home-page-mobile*') }}">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-orange-200 p-2 rounded {{ activeClass('main/home-page-mobile/photo-slider') }}">Photo Sliders</a>
        </div>
    </div>

    <a wire:navigate href="/main/promotion" class="flex items-center gap-2 text-left hover:bg-orange-200 p-2 rounded {{ activeClass('main/promotion') }}">
        <x-heroicon-o-tag class="w-5 h-5 {{ activeClass('main/promotion') }}" />
        <span class="{{ activeClass('main/promotion') }}">Promotions</span>
    </a>

    <a wire:navigate href="/main/top-up" class="flex items-center gap-2 text-left hover:bg-orange-200 p-2 rounded {{ activeClass('main/top-up') }}">
        <x-heroicon-o-plus-circle class="w-5 h-5 {{ activeClass('main/top-up') }}" />
        <span class="{{ activeClass('main/top-up') }}">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-orange-200 p-2 rounded">
            <div class="flex items-center gap-2">
                <x-heroicon-o-information-circle class="w-5 h-5 {{ activeClass('main/about-us*') }}" />
                <span class="{{ activeClass('main/about-us*') }}">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-orange-200 p-2 rounded {{ activeClass('main/about-us/card-type') }}">Card Types</a>
            <a wire:navigate href="/main/about-us/terms-and-privacy" class="text-left hover:bg-orange-200 p-2 rounded {{ activeClass('main/about-us/terms-and-privacy') }}">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-orange-200 p-2 rounded">
            <div class="flex items-center gap-2">
                <x-heroicon-o-document class="w-5 h-5 {{ activeClass('main/report*') }}" />
                <span class="{{ activeClass('main/report*') }}">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-orange-200 p-2 rounded {{ activeClass('main/report/registration-report') }}">Registration Report</a>
            <a wire:navigate href="/main/report/top-up-usage-report" class="text-left hover:bg-orange-200 p-2 rounded {{ activeClass('main/report/top-up-usage-report') }}">Top Up Usage Report</a>
            <a wire:navigate href="/main/report/mobile-usage-report" class="text-left hover:bg-orange-200 p-2 rounded {{ activeClass('main/report/mobile-usage-report') }}">Mobile Usage Report</a>
            <a wire:navigate href="/main/report/station-rating-report" class="text-left hover:bg-orange-200 p-2 rounded {{ activeClass('main/report/station-rating-report') }}">Station Rating Report</a>
        </div>
    </div>

    <a wire:navigate href="/main/system-parameter" class="flex items-center gap-2 text-left hover:bg-orange-200 p-2 rounded {{ activeClass('main/system-parameter') }}">
        <x-heroicon-o-cog-6-tooth class="w-5 h-5 {{ activeClass('main/system-parameter') }}" />
        <span class="{{ activeClass('main/system-parameter') }}">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-orange-200 p-2 rounded">
            <div class="flex items-center gap-2">
                <x-heroicon-o-map-pin class="w-5 h-5 {{ activeClass('main/station-locator*') }}" />
                <span class="{{ activeClass('main/station-locator*') }}">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-orange-200 p-2 rounded {{ activeClass('main/station-locator/branch') }}">Branches</a>
            <a wire:navigate href="/main/station-locator/station" class="text-left hover:bg-orange-200 p-2 rounded {{ activeClass('main/station-locator/station') }}">Stations</a>
            <a wire:navigate href="/main/station-locator/fuel" class="text-left hover:bg-orange-200 p-2 rounded {{ activeClass('main/station-locator/fuel') }}">Fuels</a>
        </div>
    </div>
</nav>
</div>