<ul class="space-y-1.5 font-medium">
   <p class="px-3 text-[10px] font-bold text-gray-400 uppercase tracking-widest mb-2">Welcome</p>

   {{-- Home --}}
   <li>
      <a href="{{ route('home') }}"
         class="flex items-center px-3 py-2.5 text-sm {{ request()->routeIs('home') ? 'bg-brand/5 text-brand font-bold' : 'text-gray-600 hover:bg-gray-50' }} rounded-xl transition-all group">
         <svg class="w-5 h-5 {{ request()->routeIs('home') ? 'text-brand' : 'text-gray-400 group-hover:text-brand' }} transition" 
              fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/>
         </svg>
         <span class="ms-3">Home</span>
      </a>
   </li>

   {{-- Products --}}
   <li>
      <a href="{{ route('product.index') }}"
         class="flex items-center px-3 py-2.5 text-sm {{ request()->is('produk*') ? 'bg-brand/5 text-brand font-bold' : 'text-gray-600 hover:bg-gray-50' }} rounded-xl transition-all group">
            <svg class="w-5 h-5 {{ request()->is('produk*') ? 'text-brand' : 'text-gray-400 group-hover:text-brand' }} transition" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
              <path stroke-linecap="round" stroke-linejoin="round" d="m21 7.5-9-5.25L3 7.5m18 0-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l9 5.25m0-9v9" />
            </svg>
         <span class="ms-3">Produk</span>
      </a>
   </li>

   {{-- Api Docs --}}
   <li>
      <a href="{{ route('api-docs.index') }}"
         class="flex items-center px-3 py-2.5 text-sm {{ request()->is('api-docs*') ? 'bg-brand/5 text-brand font-bold' : 'text-gray-600 hover:bg-gray-50' }} rounded-xl transition-all group">
          <svg class="w-5 h-5 {{ request()->is('api-docs*') ? 'text-brand' : 'text-gray-400 group-hover:text-brand' }} transition" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
            <path stroke-linecap="round" stroke-linejoin="round" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622 1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244" />
          </svg>
         <span class="ms-3">Api Dokumentasi</span>
      </a>
   </li>

   {{-- Contact --}}
   <li>
      <a href="{{ route('contact.index') }}"
         class="flex items-center px-3 py-2.5 text-sm {{ request()->routeIs('hubungi-kami') ? 'bg-brand/5 text-brand font-bold' : 'text-gray-600 hover:bg-gray-50' }} rounded-xl transition-all group">
          <svg class="w-5 h-5 {{ request()->routeIs('hubungi-kami') ? 'text-brand' : 'text-gray-400 group-hover:text-brand' }} transition" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
            <path stroke-linecap="round" stroke-linejoin="round" d="M20.25 3.75v4.5m0-4.5h-4.5m4.5 0-6 6m3 12c-8.284 0-15-6.716-15-15V4.5A2.25 2.25 0 0 1 4.5 2.25h1.372c.516 0 .966.351 1.091.852l1.106 4.423c.11.44-.054.902-.417 1.173l-1.293.97a1.062 1.062 0 0 0-.38 1.21 12.035 12.035 0 0 0 7.143 7.143c.441.162.928-.004 1.21-.38l.97-1.293a1.125 1.125 0 0 1 1.173-.417l4.423 1.106c.5.125.852.575.852 1.091V19.5a2.25 2.25 0 0 1-2.25 2.25h-2.25Z" />
          </svg>
         <span class="ms-3">Hubungi Kami</span>
      </a>
   </li>

   <div class="pt-4 mt-4 border-t border-gray-100">
      <p class="px-3 text-[10px] font-bold text-gray-400 uppercase tracking-widest mb-2">Account</p>
      
      {{-- Login --}}
      <li>
         <a href="{{ route('login') }}"
            class="flex items-center px-3 py-2.5 text-sm {{ request()->routeIs('login') ? 'bg-brand/5 text-brand font-bold' : 'text-gray-600 hover:bg-gray-50' }} rounded-xl transition-all group">
            <svg class="w-5 h-5 {{ request()->routeIs('login') ? 'text-brand' : 'text-gray-400 group-hover:text-brand' }} transition" 
                 fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1"/>
            </svg>
            <span class="ms-3">Login</span>
         </a>
      </li>

      {{-- Register --}}
      <li>
         <a href="{{ route('register') }}"
            class="flex items-center px-3 py-2.5 text-sm {{ request()->routeIs('register') ? 'bg-brand/5 text-brand font-bold' : 'text-gray-600 hover:bg-gray-50' }} rounded-xl transition-all group">
            <svg class="w-5 h-5 {{ request()->routeIs('register') ? 'text-brand' : 'text-gray-400 group-hover:text-brand' }} transition" 
                 fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z"/>
            </svg>
            <span class="ms-3">Register</span>
         </a>
      </li>
   </div>

</ul>
