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

Navbar UX consistency

Browse Source
This commit is contained in:
jackiettran
2025-12-23 19:39:23 -05:00
parent 426f974ed3
commit 5ec22c2a5b
2 changed files with 119 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -3,6 +3,7 @@ import { Link, useNavigate } from "react-router-dom";
import { useAuth } from "../contexts/AuthContext";
import { useSocket } from "../contexts/SocketContext";
import { rentalAPI, messageAPI } from "../services/api";
import Avatar from "./Avatar";
const Navbar: React.FC = () => {
const { user, logout, openAuthModal } = useAuth();
@@ -137,7 +138,7 @@ const Navbar: React.FC = () => {
</div>
</div>
{/* Mobile avatar toggle */}
{/* Mobile menu toggle */}
<button
className="navbar-toggler border-0 p-0"
type="button"
@@ -147,46 +148,50 @@ const Navbar: React.FC = () => {
aria-expanded="false"
aria-label="Toggle navigation"
>
<span
style={{
display: "flex",
alignItems: "center",
position: "relative",
}}
>
{(pendingRequestsCount > 0 || unreadMessagesCount > 0) && (
<span
className="mobile-notification-badge"
style={{
position: "absolute",
right: "-5px",
top: "-5px",
backgroundColor: "#dc3545",
color: "white",
borderRadius: "50%",
width: "1.2em",
height: "1.2em",
display: "flex",
alignItems: "center",
justifyContent: "center",
fontSize: "0.7em",
fontWeight: "bold",
border: "2px solid white",
zIndex: 1,
}}
>
{pendingRequestsCount + unreadMessagesCount}
</span>
)}
{user ? (
<span
style={{
display: "flex",
alignItems: "center",
position: "relative",
}}
>
{(pendingRequestsCount > 0 || unreadMessagesCount > 0) && (
<span
className="mobile-notification-badge"
style={{
position: "absolute",
right: "-5px",
top: "-5px",
backgroundColor: "#dc3545",
color: "white",
borderRadius: "50%",
width: "1.2em",
height: "1.2em",
display: "flex",
alignItems: "center",
justifyContent: "center",
fontSize: "0.7em",
fontWeight: "bold",
border: "2px solid white",
zIndex: 1,
}}
>
{pendingRequestsCount + unreadMessagesCount}
</span>
)}
<Avatar user={user} size="sm" />
</span>
) : (
<i
className="bi bi-person-circle"
className="bi bi-list"
style={{ fontSize: "1.5rem", color: "#333" }}
></i>
</span>
)}
</button>
<div className="collapse navbar-collapse" id="navbarNav">
<div className="d-flex align-items-center ms-auto">
<ul className="navbar-nav flex-row">
<div className="d-flex align-items-center justify-content-center justify-content-lg-end w-100">
<ul className="navbar-nav flex-column flex-lg-row">
{user ? (
<>
<li className="nav-item dropdown">
@@ -210,29 +215,26 @@ const Navbar: React.FC = () => {
<span
style={{
position: "absolute",
left: "-0.9em",
top: "50%",
transform: "translateY(-50%)",
right: "-5px",
top: "-5px",
backgroundColor: "#dc3545",
color: "white",
borderRadius: "50%",
width: "1.5em",
height: "1.5em",
width: "1.2em",
height: "1.2em",
display: "flex",
alignItems: "center",
justifyContent: "center",
fontSize: "0.85em",
fontSize: "0.7em",
fontWeight: "bold",
border: "2px solid white",
opacity: 1,
zIndex: 1,
}}
>
{pendingRequestsCount + unreadMessagesCount}
</span>
)}
<i className="bi bi-person-circle me-1"></i>
{user.firstName}
<Avatar user={user} size="sm" />
</span>
</a>
<ul
@@ -298,14 +300,36 @@ const Navbar: React.FC = () => {
</li>
</>
) : (
<li className="nav-item">
<button
className="btn btn-primary btn-sm text-nowrap"
onClick={() => openAuthModal("login")}
>
Login or Sign Up
</button>
</li>
<>
<li className="nav-item text-center text-lg-end">
<Link
className="nav-link d-lg-none"
to="/forum"
>
Forum
</Link>
<Link
className="btn btn-outline-primary btn-sm text-nowrap d-none d-lg-inline-block me-2"
to="/forum"
>
Forum
</Link>
</li>
<li className="nav-item text-center text-lg-end">
<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"
onClick={() => openAuthModal("login")}
>
Login or Sign Up
</button>
</li>
</>
)}
</ul>
</div>