  <nav className="navbar navbar-expand-lg  border-bottom shadow-sm">
      <div className="container py-2">
        <a href="/" className="navbar-brand d-flex align-items-center gap-2">
          <i className="bi bi-fire text-primary fs-4"></i>
          <span className="fw-bold">MangoFusion</span>
        </a>
        <button
          className="navbar-toggler"
          type="button"
          data-bs-toggle="collapse"
          data-bs-target="#mainNav"
          aria-controls="mainNav"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span className="navbar-toggler-icon"></span>
        </button>
        <div className="collapse navbar-collapse" id="mainNav">
          <ul className="navbar-nav me-auto mb-2 mb-lg-0">
            <li className="nav-item">
              <a href="#" className="nav-link">
                My Orders
              </a>
            </li>
          </ul>
          <ul className="navbar-nav ms-auto align-items-lg-center gap-lg-1">
            {/* Theme toggle visible for all users */}

            <li className="nav-item me-lg-2">
              <a
                href="#"
                className={`nav-link position-relative d-flex align-items-center justify-content-center bg-primary-subtle border-0 rounded-circle `}
                style={{ width: "44px", height: "44px" }}
              >
                <i className="bi bi-cart3 fs-5"></i>

                <span
                  className="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger text-white shadow-sm"
                  style={{ fontSize: "0.7rem" }}
                >
                  10
                </span>
              </a>
            </li>

            <li className="nav-item dropdown">
              <button
                className="nav-link dropdown-toggle btn btn-link d-flex align-items-center gap-2"
                data-bs-toggle="dropdown"
                aria-expanded="false"
              >
                <i className="bi bi-person-circle fs-5 text-primary"></i>
                <span className="text-truncate" style={{ maxWidth: "120px" }}>
                  Hello
                </span>
              </button>
              <ul
                className="dropdown-menu dropdown-menu-end shadow border rounded-3 p-2 small"
                style={{
                  minWidth: "220px",
                  "--bs-dropdown-link-active-bg":
                    "rgba(var(--bs-primary-rgb), .12)",
                  "--bs-dropdown-link-active-color": "var(--bs-body-color)",
                  "--bs-dropdown-link-hover-bg":
                    "rgba(var(--bs-primary-rgb), .08)",
                }}
              >
                {/* Removed header (avatar/name/role) for a cleaner minimal dropdown */}
                <li>
                  <a
                    href="#"
                    className="dropdown-item d-flex align-items-center gap-2 rounded-2"
                  >
                    <i className="bi bi-speedometer2 text-primary"></i>
                    <span>Order Management</span>
                  </a>
                </li>
                <li>
                  <a
                    href="#"
                    className="dropdown-item d-flex align-items-center gap-2 rounded-2"
                  >
                    <i className="bi bi-list-ul text-primary"></i>
                    <span>Menu Management</span>
                  </a>
                </li>
                <li>
                  <hr className="dropdown-divider my-2" />
                </li>
                <li>
                  <button className="dropdown-item d-flex align-items-center gap-2 text-danger rounded-2">
                    <i className="bi bi-box-arrow-right"></i>
                    <span>Logout</span>
                  </button>
                </li>
              </ul>
            </li>
            <li className="nav-item">
              <a href="#" className="nav-link">
                Login
              </a>
            </li>
            <li className="nav-item">
              <a href="#" className="nav-link">
                Register
              </a>
            </li>
           
          </ul>
        </div>
      </div>
    </nav>