From 1bd941177cd2289bfb24f08dca9c3d51478321c8 Mon Sep 17 00:00:00 2001
From: Mandeep Kumar <mk6207114453@gmail.com>
Date: Wed, 11 Feb 2026 00:50:27 +0530
Subject: [PATCH] fix(navbar): resolve login/get started visibility issue on
 mobile (#249)

---
 src/components/Navbar.css | 29 +++++++++-----
 src/components/Navbar.jsx | 83 ++++++++++++++-------------------------
 2 files changed, 48 insertions(+), 64 deletions(-)

diff --git a/src/components/Navbar.css b/src/components/Navbar.css
index 6d34279..da1c990 100644
--- a/src/components/Navbar.css
+++ b/src/components/Navbar.css
@@ -1546,13 +1546,18 @@
     display: none;
   }
 
+  /* On small screens the desktop auth controls should be hidden
+     and mobile menu auth buttons used instead. Don't hide the
+     button classes globally because mobile menu re-uses them. */
   .desktop-auth {
-    display: flex !important;
+    display: none !important;
   }
-  
-  .navbar-btn-login,
-  .navbar-btn-signup {
-    display: none;
+
+  /* Ensure auth buttons inside the mobile menu are visible */
+  .mobile-menu .mobile-auth .navbar-btn,
+  .mobile-menu .mobile-auth .navbar-btn-login,
+  .mobile-menu .mobile-auth .navbar-btn-signup {
+    display: block;
   }
   
   .navbar-logo {
@@ -1620,13 +1625,17 @@
     display: none;
   }
   
+  /* On tablet narrow view hide the desktop auth controls so the
+     mobile toggle/menu provides the auth actions. Mobile auth
+     buttons inside the menu are handled separately. */
   .desktop-auth {
-    display: flex !important;
+    display: none !important;
   }
-  
-  .navbar-btn-login,
-  .navbar-btn-signup {
-    display: none;
+
+  .mobile-menu .mobile-auth .navbar-btn,
+  .mobile-menu .mobile-auth .navbar-btn-login,
+  .mobile-menu .mobile-auth .navbar-btn-signup {
+    display: block;
   }
   
   .navbar-logo {
diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
index 0a4bb7d..48ea18d 100644
--- a/src/components/Navbar.jsx
+++ b/src/components/Navbar.jsx
@@ -61,8 +61,8 @@ function Navbar() {
   }, []);
 
   useEffect(() => {
-    const handleClickOutside = (e) => {
-      if (openDropdown && !e.target.closest(".dropdown-container")) {
+    const handleClickOutside = (event) => {
+      if (openDropdown && !event.target.closest(".dropdown-container")) {
         setOpenDropdown(null);
       }
       if (isProfileOpen && !event.target.closest('.profile-menu-container')) {
@@ -78,11 +78,11 @@ function Navbar() {
     };
 
     document.addEventListener("click", handleClickOutside);
-    document.addEventListener("keydown", handleEscape);
+    document.addEventListener("keydown", handleEscapeKey);
 
     return () => {
       document.removeEventListener("click", handleClickOutside);
-      document.removeEventListener("keydown", handleEscape);
+      document.removeEventListener("keydown", handleEscapeKey);
     };
   }, [openDropdown, isProfileOpen]);
 
@@ -115,6 +115,7 @@ function Navbar() {
 
   return (
     <nav
+      data-theme={theme}
       className={`navbar ${scrolled ? "scrolled" : ""} ${
         isMobileMenuOpen ? "has-mobile-menu" : ""
       } ${isDashboardPage ? "is-dashboard" : ""}`}
@@ -128,57 +129,24 @@ function Navbar() {
 
         {/* Desktop Menu */}
         {!isDashboardPage && (
-    <ul className="navbar-menu">
-      {(currentUser ? authenticatedNavLinks : navLinks).map((link) => (
-        <li
-          key={link.label}
-          className="navbar-item"
-          onMouseEnter={() => link.dropdown && handleDropdownEnter(link.label)}
-          onMouseLeave={handleDropdownLeave}
-        >
-          {link.dropdown ? (
-            <>
-              <span 
-                className="navbar-link dropdown-trigger"
-                onClick={() => handleDropdownClick(link.label)}
-                role="button"
-                aria-expanded={openDropdown === link.label}
-                aria-haspopup="true"
-                tabIndex={0}
-                onKeyDown={(e) => {
-                  if (e.key === 'Enter' || e.key === ' ') {
-                    e.preventDefault();
-                    handleDropdownClick(link.label);
-                  }
-                }}
+          <ul className="navbar-menu">
+            {linksToRender.map((link) => (
+              <li
+                key={link.label}
+                className="navbar-item"
+                onMouseEnter={() => link.dropdown && handleDropdownEnter(link.label)}
+                onMouseLeave={handleDropdownLeave}
               >
-                {link.label}
-              </span>
-
-              <ul 
-                className={`dropdown-menu ${openDropdown === link.label ? 'show' : ''}`}
-                role="menu"
-                aria-label={`${link.label} submenu`}
-              >
-                {!link.dropdown ? (
-                  <Link
-                    to={link.to}
-                    className={`navbar-link ${
-                      location.pathname === link.to ? "active" : ""
-                    }`}
-                    onClick={closeMobileMenu}
-                  >
-                    {link.label}
-                  </Link>
-                ) : (
+                {link.dropdown ? (
                   <>
-                    <span
+                    <button
+                      type="button"
                       className="navbar-link dropdown-trigger"
+                      onClick={() => handleDropdownClick(link.label)}
                       role="button"
-                      tabIndex={0}
-                      aria-haspopup="true"
                       aria-expanded={openDropdown === link.label}
-                      onClick={() => handleDropdownClick(link.label)}
+                      aria-haspopup="true"
+                      tabIndex={0}
                       onKeyDown={(e) => {
                         if (e.key === "Enter" || e.key === " ") {
                           e.preventDefault();
@@ -187,13 +155,12 @@ function Navbar() {
                       }}
                     >
                       {link.label}
-                    </span>
+                    </button>
 
                     <ul
-                      className={`dropdown-menu ${
-                        openDropdown === link.label ? "show" : ""
-                      }`}
+                      className={`dropdown-menu ${openDropdown === link.label ? "show" : ""}`}
                       role="menu"
+                      aria-label={`${link.label} submenu`}
                     >
                       {link.dropdown.map((item) => (
                         <li key={item.to} role="none">
@@ -209,6 +176,14 @@ function Navbar() {
                       ))}
                     </ul>
                   </>
+                ) : (
+                  <Link
+                    to={link.to}
+                    className={`navbar-link ${location.pathname === link.to ? "active" : ""}`}
+                    onClick={closeMobileMenu}
+                  >
+                    {link.label}
+                  </Link>
                 )}
               </li>
             ))}