fixed bug where avatar wasn't showing on desktop mode

frontend/src/components/Navbar.tsx

@@ -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>
-                    <li className="d-lg-none">
                       <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 */}
+          {/* Desktop navigation - outside mobile menu container */}
-                    <li className="nav-item d-none d-lg-block" ref={dropdownRef} style={{ position: "relative" }}>
+          <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 ||
+                    {(pendingRequestsCount > 0 || unreadMessagesCount > 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>