Jackie/rentall-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

navbar menu styling

Browse Source
This commit is contained in:
jackiettran
2025-12-23 23:08:36 -05:00
parent 2a32470758
commit b02ec19d5c
1 changed files with 108 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

125
frontend/src/components/Navbar.tsx
View File

@@ -107,6 +107,36 @@ const Navbar: React.FC = () => {
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">
<div className="container-fluid" style={{ maxWidth: "1800px" }}>
<Link className="navbar-brand fw-bold" to="/">
@@ -190,11 +220,67 @@ const Navbar: React.FC = () => {
)}
</button>
<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">
{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
className="nav-link dropdown-toggle"
href="#"
@@ -301,29 +387,34 @@ const Navbar: React.FC = () => {
</>
) : (
<>
<li className="nav-item text-center text-lg-end">
<Link
className="nav-link d-lg-none"
to="/forum"
>
Forum
{/* Mobile menu items */}
<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">
<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
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"
>
Forum
</Link>
</li>
<li className="nav-item text-center text-lg-end">
<li className="nav-item d-none d-lg-block">
<button
className="nav-link d-lg-none w-100 border-0 bg-transparent"
onClick={() => openAuthModal("login")}
>
Login or Sign Up
</button>
<button
className="btn btn-primary btn-sm text-nowrap d-none d-lg-inline-block"
className="btn btn-primary btn-sm text-nowrap"
onClick={() => openAuthModal("login")}
>
Login or Sign Up