From b02ec19d5c39755dd35e93ce68b2da2925ac4df5 Mon Sep 17 00:00:00 2001
From: jackiettran <41605212+jackiettran@users.noreply.github.com>
Date: Tue, 23 Dec 2025 23:08:36 -0500
Subject: [PATCH] navbar menu styling

---
 frontend/src/components/Navbar.tsx | 125 +++++++++++++++++++++++++----
 1 file changed, 108 insertions(+), 17 deletions(-)

diff --git a/frontend/src/components/Navbar.tsx b/frontend/src/components/Navbar.tsx
index 626bd06..7f424b9 100644
--- a/frontend/src/components/Navbar.tsx
+++ b/frontend/src/components/Navbar.tsx
@@ -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