

<div class=" w-3/12 p-2 h-screen">
    <!-- User Greeting -->
    <div class="mb-3 bg-white shadow-md p-3">
        
      <div class=" text-gray-600 text-lg">Hello,</div>
      <div class="font-semibold text-lg text-primary">Mohammed Raihan</div>
    </div>
    
    <!-- Sidebar Menu -->
    <nav class=" bg-white shadow-md space-y-2 p-3">
      <a href="/orders" class="block py-2 px-4 rounded hover:bg-gray-200">
        <i class="fas fa-box"></i> My Orders
      </a>
      <div class="text-gray-500 font-bold px-4">ACCOUNT SETTINGS</div>
      <a href="/account" class="block py-2 px-4 rounded <%= locals.title === 'Profile Edit'? 'bg-primary' : 'hover:bg-gray-200' %>">Profile Information</a>
      <a href="/account/address" class="block py-2 px-4 rounded <%= locals.title === 'Manage Addresses' ? 'bg-primary' : ' hover:bg-gray-200' %>">Manage Addresses</a>
      <a href="/account/change-password" class="block py-2 px-4 rounded <%= locals.title === 'Change Password' ? 'bg-primary' : ' hover:bg-gray-200' %>">Change Passsword</a>
  
      <div class="text-gray-500 font-bold px-4"><i class="fab fa-amazon-pay"></i>  PAYMENTS</div>

      <a href="/account/gift-cards" class="block py-2 px-4 rounded hover:bg-gray-200">Gitf Cards</a>
      <a href="/account/card-details" class="block py-2 px-4 rounded hover:bg-gray-200">Card Details</a>
  
      <div class="text-gray-500 font-bold px-4">MY STUFF</div>
      <a href="/account/coupons" class="block py-2 px-4 rounded hover:bg-gray-200">My Coupons</a>
      <a href="/account/reviews" class="block py-2 px-4 rounded hover:bg-gray-200">My Reviews & Ratings</a>
      <a href="/wishlist" class="block py-2 px-4 rounded hover:bg-gray-200">My Wishlist</a>
      <a href="/cart" class="block py-2 px-4 rounded hover:bg-gray-200">My Cart</a>
  
      <a href="/user/logout" class="block py-2 px-4 rounded hover:bg-gray-200">
        <i class="fas fa-power-off"></i> Logout
      </a>
    </nav>
  </div>
  