<!-- Sidebar -->
<aside
    id="sidebar"
    class="fixed lg:static inset-y-0 left-0 z-50
    w-[260px] xl:w-[280px] 2xl:w-[316px]
    bg-[#FCFCFC]
    Poppins-medium text-[15px] text-[#505050]
    min-h-screen
    transform -translate-x-full lg:translate-x-0
    transition-transform duration-300">

    <div class="flex justify-center p-8 xl:p-9 2xl:p-10">
        <a href="{{url('/')}}">

            <img src="{{ asset('student/Sites/images/logo.png') }}" />
        </a>
    </div>
    
    @php
        $active = "bg-[#F4C701] text-[#000000] rounded-[10px]
        before:absolute 2xl:before:-left-7 xl:before:-left-6  before:-left-5 before:top-0
        before:h-full before:w-1 before:bg-[#F4C701]
        before:rounded-r-[10px]";
    @endphp

    <nav class="mt-4 px-5 xl:px-6 2xl:px-7 space-y-4 xl:space-y-5">

        <a href="{{ route('student.studentProfile') }}"
           class="flex items-center justify-between
           px-3 xl:px-4
           py-2
           bg-white text-[#133754]
           rounded-[13px] border border-[#EAEAEA]">
            <div class="flex items-center gap-3">
                <img class="w-[45px] h-[45px]" src="{{ asset(auth()->user()->userDefaultProfile) }}" />
                <span class="font-medium">{{auth()->user()->username}}</span>
            </div>
            <i class="fa-solid fa-arrow-right-long"></i>
        </a>

        <a href="{{ route('student.dashboard') }}"
           class="relative flex items-center
           gap-4 xl:gap-5 2xl:gap-6
           px-4 xl:px-5 2xl:px-6
           py-2.5 xl:py-3
           pl-3 xl:pl-4
           {{ request()->routeIs('student.dashboard') ? $active : '' }}">
  <img
        src="{{ asset(
            request()->routeIs('student.dashboard')
            ? 'student/Sites/images/dashboard-icon-black.png'
            : 'student/Sites/images/dashboard-icon-black.png'
        ) }}"
        alt="Dashboard"
    />
            <span>Dashboard</span>
        </a>

        <a href="{{ route('student.sessions') }}"
           class="relative flex items-center
           gap-4 xl:gap-5 2xl:gap-6
           px-4 xl:px-5 2xl:px-6
           py-2.5 xl:py-3
           pl-3 xl:pl-4
           rounded-[10px]
           {{ request()->routeIs('student.sessions') ? $active : '' }}">
            <i class="fa-regular fa-calendar w-6 text-lg text-center"></i>
            <span>Sessions</span>
        </a>

        <a href="{{ route('student.bookingRequest') }}"
           class="relative flex items-center
           gap-4 xl:gap-5 2xl:gap-6
           px-4 xl:px-5 2xl:px-6
           py-2.5 xl:py-3
           pl-3 xl:pl-4
           rounded-[10px]
           {{ request()->routeIs('student.bookingRequest') ? $active : '' }}">
            <i class="fa-regular fa-pen-to-square w-6 text-lg text-center"></i>
            <span>Bookings</span>
        </a>

        <a href="{{ route('student.payments') }}"
           class="relative flex items-center
           gap-4 xl:gap-5 2xl:gap-6
           px-4 xl:px-5 2xl:px-6
           py-2.5 xl:py-3
           pl-3 xl:pl-4
           rounded-[10px]
           {{ request()->routeIs('student.payments') ? $active : '' }}">
            <i class="fa-solid fa-dollar-sign w-6 text-lg text-center"></i>
            <span>Payments</span>
        </a>
        <a href="{{ route('student.supportAndDispute') }}"
           class="relative flex items-center
           gap-4 xl:gap-5 2xl:gap-6
           px-4 xl:px-5 2xl:px-6
           py-2.5 xl:py-3
           pl-3 xl:pl-4
           rounded-[10px]
           {{ request()->routeIs('student.supportAndDispute') ? $active : '' }}">
            <i class="fa-regular fa-circle-question w-6 text-lg text-center"></i>
            <span>Support & Disputes</span>
        </a>

    </nav>
     <div class="flex justify-center logout">


        <a href="{{ route('logout') }}"
            class="relative flex items-center w-[90%]  border border-[#E3E3E3]
           gap-4 xl:gap-5 2xl:gap-6
           px-4 xl:px-5 2xl:px-6
           py-2.5 xl:py-3
           pl-3 xl:pl-4
           rounded-[10px]
           ">
            <i class="fa fa-sign-out w-6 text-lg text-center"></i>
            <span>Logout</span>
        </a>
    </div>


</aside>
