navbar menu styling
This commit is contained in:
jackiettran
@@ -107,6 +107,36 @@ const Navbar: React.FC = () => {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
|
<style>
|
||||||
|
{`
|
||||||
|
@media (max-width: 991.98px) {
|
||||||
|
#navbarNav {
|
||||||
|
position: absolute;
|
||||||
|
top: calc(100% - 8px);
|
||||||
|
right: 0.5rem;
|
||||||
|
left: auto;
|
||||||
|
z-index: 1000;
|
||||||
|
min-width: 10rem;
|
||||||
|
padding: 0;
|
||||||
|
background-color: #fff;
|
||||||
|
border: 1px solid rgba(0,0,0,.15);
|
||||||
|
border-radius: 0.375rem;
|
||||||
|
box-shadow: 0 0.5rem 1rem rgba(0,0,0,.175);
|
||||||
|
}
|
||||||
|
#navbarNav .mobile-menu {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
#navbarNav .dropdown-item {
|
||||||
|
padding: 0.25rem 1rem;
|
||||||
|
}
|
||||||
|
#navbarNav .dropdown-divider {
|
||||||
|
margin: 0.5rem 0;
|
||||||
|
border-top: 1px solid rgba(0,0,0,.15);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`}
|
||||||
|
</style>
|
||||||
<nav className="navbar navbar-expand-lg navbar-light bg-white shadow-sm">
|
<nav className="navbar navbar-expand-lg navbar-light bg-white shadow-sm">
|
||||||
<div className="container-fluid" style={{ maxWidth: "1800px" }}>
|
<div className="container-fluid" style={{ maxWidth: "1800px" }}>
|
||||||
<Link className="navbar-brand fw-bold" to="/">
|
<Link className="navbar-brand fw-bold" to="/">
|
||||||
@@ -190,11 +220,67 @@ const Navbar: React.FC = () => {
|
|||||||
)}
|
)}
|
||||||
</button>
|
</button>
|
||||||
<div className="collapse navbar-collapse" id="navbarNav">
|
<div className="collapse navbar-collapse" id="navbarNav">
|
||||||
<div className="d-flex align-items-center justify-content-center justify-content-lg-end w-100">
|
<div
|
||||||
|
className="d-flex align-items-center justify-content-center justify-content-lg-end w-100 py-3 py-lg-0 mobile-menu"
|
||||||
|
>
|
||||||
<ul className="navbar-nav flex-column flex-lg-row">
|
<ul className="navbar-nav flex-column flex-lg-row">
|
||||||
{user ? (
|
{user ? (
|
||||||
<>
|
<>
|
||||||
<li className="nav-item dropdown">
|
{/* Mobile menu - show items directly */}
|
||||||
|
<li className="d-lg-none">
|
||||||
|
<Link className="dropdown-item" to="/profile">
|
||||||
|
<i className="bi bi-person me-2"></i>Profile
|
||||||
|
</Link>
|
||||||
|
</li>
|
||||||
|
<li className="d-lg-none">
|
||||||
|
<Link className="dropdown-item" to="/renting">
|
||||||
|
<i className="bi bi-calendar-check me-2"></i>Renting
|
||||||
|
</Link>
|
||||||
|
</li>
|
||||||
|
<li className="d-lg-none">
|
||||||
|
<Link className="dropdown-item" to="/owning">
|
||||||
|
<i className="bi bi-list-ul me-2"></i>Owning
|
||||||
|
{pendingRequestsCount > 0 && (
|
||||||
|
<span className="badge bg-danger rounded-pill ms-2">
|
||||||
|
{pendingRequestsCount}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</Link>
|
||||||
|
</li>
|
||||||
|
<li className="d-lg-none">
|
||||||
|
<Link className="dropdown-item" to="/forum">
|
||||||
|
<i className="bi bi-chat-dots me-2"></i>Forum
|
||||||
|
</Link>
|
||||||
|
</li>
|
||||||
|
<li className="d-lg-none">
|
||||||
|
<Link className="dropdown-item" to="/earnings">
|
||||||
|
<i className="bi bi-cash-coin me-2"></i>Earnings
|
||||||
|
</Link>
|
||||||
|
</li>
|
||||||
|
<li className="d-lg-none">
|
||||||
|
<Link className="dropdown-item" to="/messages">
|
||||||
|
<i className="bi bi-envelope me-2"></i>Messages
|
||||||
|
{unreadMessagesCount > 0 && (
|
||||||
|
<span className="badge bg-danger rounded-pill ms-2">
|
||||||
|
{unreadMessagesCount}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</Link>
|
||||||
|
</li>
|
||||||
|
<li className="d-lg-none">
|
||||||
|
<hr className="dropdown-divider" />
|
||||||
|
</li>
|
||||||
|
<li className="d-lg-none">
|
||||||
|
<button
|
||||||
|
className="dropdown-item"
|
||||||
|
onClick={handleLogout}
|
||||||
|
>
|
||||||
|
<i className="bi bi-box-arrow-right me-2"></i>Logout
|
||||||
|
</button>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
{/* Desktop dropdown */}
|
||||||
|
<li className="nav-item dropdown d-none d-lg-block">
|
||||||
<a
|
<a
|
||||||
className="nav-link dropdown-toggle"
|
className="nav-link dropdown-toggle"
|
||||||
href="#"
|
href="#"
|
||||||
@@ -301,29 +387,34 @@ const Navbar: React.FC = () => {
|
|||||||
</>
|
</>
|
||||||
) : (
|
) : (
|
||||||
<>
|
<>
|
||||||
<li className="nav-item text-center text-lg-end">
|
{/* Mobile menu items */}
|
||||||
<Link
|
<li className="d-lg-none">
|
||||||
className="nav-link d-lg-none"
|
<Link className="dropdown-item" to="/forum">
|
||||||
to="/forum"
|
<i className="bi bi-chat-dots me-2"></i>Forum
|
||||||
>
|
|
||||||
Forum
|
|
||||||
</Link>
|
</Link>
|
||||||
|
</li>
|
||||||
|
<li className="d-lg-none">
|
||||||
|
<button
|
||||||
|
className="dropdown-item fw-bold"
|
||||||
|
style={{ color: "#000000" }}
|
||||||
|
onClick={() => openAuthModal("login")}
|
||||||
|
>
|
||||||
|
<i className="bi bi-box-arrow-in-right me-2"></i>Login or Sign Up
|
||||||
|
</button>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
{/* Desktop buttons */}
|
||||||
|
<li className="nav-item d-none d-lg-block">
|
||||||
<Link
|
<Link
|
||||||
className="btn btn-outline-primary btn-sm text-nowrap d-none d-lg-inline-block me-2"
|
className="btn btn-outline-primary btn-sm text-nowrap me-2"
|
||||||
to="/forum"
|
to="/forum"
|
||||||
>
|
>
|
||||||
Forum
|
Forum
|
||||||
</Link>
|
</Link>
|
||||||
</li>
|
</li>
|
||||||
<li className="nav-item text-center text-lg-end">
|
<li className="nav-item d-none d-lg-block">
|
||||||
<button
|
<button
|
||||||
className="nav-link d-lg-none w-100 border-0 bg-transparent"
|
className="btn btn-primary btn-sm text-nowrap"
|
||||||
onClick={() => openAuthModal("login")}
|
|
||||||
>
|
|
||||||
Login or Sign Up
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
className="btn btn-primary btn-sm text-nowrap d-none d-lg-inline-block"
|
|
||||||
onClick={() => openAuthModal("login")}
|
onClick={() => openAuthModal("login")}
|
||||||
>
|
>
|
||||||
Login or Sign Up
|
Login or Sign Up
|
||||||
|
|||||||
Reference in New Issue
Block a user