
<Style>
        .navbar{            
        background-color: #eac064;
            border-bottom: 1px solid #eff4f8;
        }
        #col{
          font-size: 18px;
          color: rgb(86, 60, 11);
          font-weight: 500;
        }
       .navbar-brand {
            color: #bfcad3;
            font-size: 1.25rem;
            font-weight: 600;
            margin-left: 1px;
       
        }
        .navbar-brand img{
          box-shadow: 1px 1px rgba(17, 208, 97, 0);
            height: 25%;
            width: 25%;
        }
       .nav-link {
            color: #d8e8c2;
            font-size: 1rem;
            font-weight: 400;
        }

       .nav-link:hover {
            color: #c0f819;
        }
        
       .badge {
            margin-left: 0.5rem;
        
        }
        .fa-solid {
          background-color:black;
        }
</Style>
<nav class="navbar navbar-expand-lg bg-lite">
    <div class="container-fluid ">
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
        <!-- <a class="navbar-brand" href="#"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSERZlL-CmmZ2fV1YZZe2cLrGaSqO7A_gFYdQ&usqp=CAU" alt=""></a> -->
        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
          <li class="nav-item">
            <a class="nav-link " aria-current="page" href="/products" id="col">Home</a>
          </li>
        <% if(currentUser && currentUser.role =='seller'){ %>
          <li class="nav-item">
            <a class="nav-link" href="/products/new" id="col">Add Item</a>
          </li>
        <% } %>
        </ul>
        <div class="d-flex" role="search">
          <% if(!currentUser){ %>
          <a href="/login" class="nav-link mx-2" id="col">Login</a>
           <% } else { %>
            <a href="#" class="nav-link mx-2" id="col">Hello, <%= currentUser.username %></a>   
            <a href="/user/cart" class="nav-link mx-2">
            <i class="fa-solid fa-cart-shopping"></i>    <!--fontawsome sai cart bala icon uthaya h -->
            <sup><span class="badge bg-danger"><%= currentUser.cart.length %></span></sup>  <!--superscript :- cart mai kitne item h ismai ye de skte h-->
          </a>
          <a href="/logout" class="nav-link mx-2" id="col">Logout</a>
           <% }  %>
        </div>
      </div>
    </div>
  </nav>
