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

fixed bug where avatar wasn't showing on desktop mode

Browse Source
This commit is contained in:
jackiettran
2025-12-30 23:48:38 -05:00
parent 3ff98fbe1e
commit f66dccdfa3
1 changed files with 150 additions and 151 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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,9 +333,36 @@ const Navbar: React.FC = () => {
<i className="bi bi-box-arrow-right me-2"></i>Logout
</button>
</li>
</>
) : (
<>
<li>
<Link className="dropdown-item" to="/forum" onClick={closeMobileMenu}>
<i className="bi bi-chat-dots me-2"></i>Forum
</Link>
</li>
<li>
<button
className="dropdown-item fw-bold"
style={{ color: "#000000" }}
onClick={() => {
closeMobileMenu();
openAuthModal("login");
}}
>
<i className="bi bi-box-arrow-in-right me-2"></i>Login or Sign Up
</button>
</li>
</>
)}
</ul>
</div>
</div>
{/* Desktop dropdown */}
<li className="nav-item d-none d-lg-block" ref={dropdownRef} style={{ position: "relative" }}>
{/* 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"
@@ -353,8 +380,7 @@ const Navbar: React.FC = () => {
position: "relative",
}}
>
{(pendingRequestsCount > 0 ||
unreadMessagesCount > 0) && (
{(pendingRequestsCount > 0 || unreadMessagesCount > 0) && (
<span
style={{
position: "absolute",
@@ -450,50 +476,23 @@ const Navbar: React.FC = () => {
</li>
</ul>
)}
</li>
</>
</div>
) : (
<>
{/* Mobile menu items */}
<li className="d-lg-none">
<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">
<button
className="dropdown-item fw-bold"
style={{ color: "#000000" }}
onClick={() => {
closeMobileMenu();
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 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>
</div>
</nav>