fixed bug where avatar wasn't showing on desktop mode
This commit is contained in:
jackiettran
@@ -15,7 +15,7 @@ const Navbar: React.FC = () => {
|
||||
const [unreadMessagesCount, setUnreadMessagesCount] = useState(0);
|
||||
const [isDropdownOpen, setIsDropdownOpen] = useState(false);
|
||||
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
|
||||
const dropdownRef = useRef<HTMLLIElement>(null);
|
||||
const dropdownRef = useRef<HTMLDivElement>(null);
|
||||
const mobileMenuRef = useRef<HTMLDivElement>(null);
|
||||
const mobileToggleRef = useRef<HTMLButtonElement>(null);
|
||||
|
||||
@@ -253,6 +253,7 @@ const Navbar: React.FC = () => {
|
||||
></i>
|
||||
)}
|
||||
</button>
|
||||
{/* Mobile menu dropdown */}
|
||||
<div
|
||||
ref={mobileMenuRef}
|
||||
id="navbarNav"
|
||||
@@ -273,23 +274,22 @@ const Navbar: React.FC = () => {
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="d-flex align-items-center justify-content-center justify-content-lg-end w-100 py-3 py-lg-0 mobile-menu"
|
||||
className="d-flex align-items-center justify-content-center w-100 py-3 mobile-menu"
|
||||
>
|
||||
<ul className="navbar-nav flex-column flex-lg-row">
|
||||
<ul className="navbar-nav flex-column">
|
||||
{user ? (
|
||||
<>
|
||||
{/* Mobile menu - show items directly */}
|
||||
<li className="d-lg-none">
|
||||
<li>
|
||||
<Link className="dropdown-item" to="/profile" onClick={closeMobileMenu}>
|
||||
<i className="bi bi-person me-2"></i>Profile
|
||||
</Link>
|
||||
</li>
|
||||
<li className="d-lg-none">
|
||||
<li>
|
||||
<Link className="dropdown-item" to="/renting" onClick={closeMobileMenu}>
|
||||
<i className="bi bi-calendar-check me-2"></i>Renting
|
||||
</Link>
|
||||
</li>
|
||||
<li className="d-lg-none">
|
||||
<li>
|
||||
<Link className="dropdown-item" to="/owning" onClick={closeMobileMenu}>
|
||||
<i className="bi bi-list-ul me-2"></i>Owning
|
||||
{pendingRequestsCount > 0 && (
|
||||
@@ -299,17 +299,17 @@ const Navbar: React.FC = () => {
|
||||
)}
|
||||
</Link>
|
||||
</li>
|
||||
<li className="d-lg-none">
|
||||
<li>
|
||||
<Link className="dropdown-item" to="/forum" onClick={closeMobileMenu}>
|
||||
<i className="bi bi-chat-dots me-2"></i>Forum
|
||||
</Link>
|
||||
</li>
|
||||
<li className="d-lg-none">
|
||||
<li>
|
||||
<Link className="dropdown-item" to="/earnings" onClick={closeMobileMenu}>
|
||||
<i className="bi bi-cash-coin me-2"></i>Earnings
|
||||
</Link>
|
||||
</li>
|
||||
<li className="d-lg-none">
|
||||
<li>
|
||||
<Link className="dropdown-item" to="/messages" onClick={closeMobileMenu}>
|
||||
<i className="bi bi-envelope me-2"></i>Messages
|
||||
{unreadMessagesCount > 0 && (
|
||||
@@ -319,10 +319,10 @@ const Navbar: React.FC = () => {
|
||||
)}
|
||||
</Link>
|
||||
</li>
|
||||
<li className="d-lg-none">
|
||||
<li>
|
||||
<hr className="dropdown-divider" />
|
||||
</li>
|
||||
<li className="d-lg-none">
|
||||
<li>
|
||||
<button
|
||||
className="dropdown-item"
|
||||
onClick={() => {
|
||||
@@ -333,134 +333,15 @@ const Navbar: React.FC = () => {
|
||||
<i className="bi bi-box-arrow-right me-2"></i>Logout
|
||||
</button>
|
||||
</li>
|
||||
|
||||
{/* Desktop dropdown */}
|
||||
<li className="nav-item d-none d-lg-block" ref={dropdownRef} style={{ position: "relative" }}>
|
||||
<button
|
||||
type="button"
|
||||
className="nav-link btn btn-link p-0"
|
||||
aria-expanded={isDropdownOpen}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setIsDropdownOpen((prev) => !prev);
|
||||
}}
|
||||
style={{ cursor: "pointer", border: "none", background: "none" }}
|
||||
>
|
||||
<span
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
position: "relative",
|
||||
}}
|
||||
>
|
||||
{(pendingRequestsCount > 0 ||
|
||||
unreadMessagesCount > 0) && (
|
||||
<span
|
||||
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>
|
||||
</button>
|
||||
{isDropdownOpen && (
|
||||
<ul
|
||||
className="dropdown-menu show"
|
||||
style={{
|
||||
position: "absolute",
|
||||
right: 0,
|
||||
top: "100%",
|
||||
zIndex: 1000,
|
||||
}}
|
||||
>
|
||||
<li>
|
||||
<Link className="dropdown-item" to="/profile" onClick={() => setIsDropdownOpen(false)}>
|
||||
<i className="bi bi-person me-2"></i>Profile
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link className="dropdown-item" to="/renting" onClick={() => setIsDropdownOpen(false)}>
|
||||
<i className="bi bi-calendar-check me-2"></i>
|
||||
Renting
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link className="dropdown-item" to="/owning" onClick={() => setIsDropdownOpen(false)}>
|
||||
<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>
|
||||
<Link className="dropdown-item" to="/forum" onClick={() => setIsDropdownOpen(false)}>
|
||||
<i className="bi bi-chat-dots me-2"></i>
|
||||
Forum
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link className="dropdown-item" to="/earnings" onClick={() => setIsDropdownOpen(false)}>
|
||||
<i className="bi bi-cash-coin me-2"></i>
|
||||
Earnings
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link className="dropdown-item" to="/messages" onClick={() => setIsDropdownOpen(false)}>
|
||||
<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>
|
||||
<hr className="dropdown-divider" />
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
className="dropdown-item"
|
||||
onClick={() => {
|
||||
setIsDropdownOpen(false);
|
||||
handleLogout();
|
||||
}}
|
||||
>
|
||||
<i className="bi bi-box-arrow-right me-2"></i>
|
||||
Logout
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
)}
|
||||
</li>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
{/* Mobile menu items */}
|
||||
<li className="d-lg-none">
|
||||
<li>
|
||||
<Link className="dropdown-item" to="/forum" onClick={closeMobileMenu}>
|
||||
<i className="bi bi-chat-dots me-2"></i>Forum
|
||||
</Link>
|
||||
</li>
|
||||
<li className="d-lg-none">
|
||||
<li>
|
||||
<button
|
||||
className="dropdown-item fw-bold"
|
||||
style={{ color: "#000000" }}
|
||||
@@ -472,29 +353,147 @@ const Navbar: React.FC = () => {
|
||||
<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 me-2"
|
||||
to="/forum"
|
||||
>
|
||||
Forum
|
||||
</Link>
|
||||
</li>
|
||||
<li className="nav-item d-none d-lg-block">
|
||||
<button
|
||||
className="btn btn-primary btn-sm text-nowrap"
|
||||
onClick={() => openAuthModal("login")}
|
||||
>
|
||||
Login or Sign Up
|
||||
</button>
|
||||
</li>
|
||||
</>
|
||||
)}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Desktop navigation - outside mobile menu container */}
|
||||
<div className="d-none d-lg-flex align-items-center">
|
||||
{user ? (
|
||||
<div ref={dropdownRef} style={{ position: "relative" }}>
|
||||
<button
|
||||
type="button"
|
||||
className="nav-link btn btn-link p-0"
|
||||
aria-expanded={isDropdownOpen}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setIsDropdownOpen((prev) => !prev);
|
||||
}}
|
||||
style={{ cursor: "pointer", border: "none", background: "none" }}
|
||||
>
|
||||
<span
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
position: "relative",
|
||||
}}
|
||||
>
|
||||
{(pendingRequestsCount > 0 || unreadMessagesCount > 0) && (
|
||||
<span
|
||||
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>
|
||||
</button>
|
||||
{isDropdownOpen && (
|
||||
<ul
|
||||
className="dropdown-menu show"
|
||||
style={{
|
||||
position: "absolute",
|
||||
right: 0,
|
||||
top: "100%",
|
||||
zIndex: 1000,
|
||||
}}
|
||||
>
|
||||
<li>
|
||||
<Link className="dropdown-item" to="/profile" onClick={() => setIsDropdownOpen(false)}>
|
||||
<i className="bi bi-person me-2"></i>Profile
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link className="dropdown-item" to="/renting" onClick={() => setIsDropdownOpen(false)}>
|
||||
<i className="bi bi-calendar-check me-2"></i>
|
||||
Renting
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link className="dropdown-item" to="/owning" onClick={() => setIsDropdownOpen(false)}>
|
||||
<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>
|
||||
<Link className="dropdown-item" to="/forum" onClick={() => setIsDropdownOpen(false)}>
|
||||
<i className="bi bi-chat-dots me-2"></i>
|
||||
Forum
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link className="dropdown-item" to="/earnings" onClick={() => setIsDropdownOpen(false)}>
|
||||
<i className="bi bi-cash-coin me-2"></i>
|
||||
Earnings
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link className="dropdown-item" to="/messages" onClick={() => setIsDropdownOpen(false)}>
|
||||
<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>
|
||||
<hr className="dropdown-divider" />
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
className="dropdown-item"
|
||||
onClick={() => {
|
||||
setIsDropdownOpen(false);
|
||||
handleLogout();
|
||||
}}
|
||||
>
|
||||
<i className="bi bi-box-arrow-right me-2"></i>
|
||||
Logout
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<Link
|
||||
className="btn btn-outline-primary btn-sm text-nowrap me-2"
|
||||
to="/forum"
|
||||
>
|
||||
Forum
|
||||
</Link>
|
||||
<button
|
||||
className="btn btn-primary btn-sm text-nowrap"
|
||||
onClick={() => openAuthModal("login")}
|
||||
>
|
||||
Login or Sign Up
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</>
|
||||
|
||||
Reference in New Issue
Block a user