Merge pull request #129 from bluethreadmade/mobileNavigationUpdate

chore: rework the header navigation in mobile view (WEB-125)

Author: dgarcia-appdev

package-lock.json

@@ -39,7 +39,7 @@
     "eslint-config-next": "14.1.1",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
-    "prettier": "^3.2.5",
+    "prettier": "^3.5.0",
     "typescript": "^5"
   }
 }

package.json

@@ -139,6 +139,7 @@
     right: 0;
     z-index: 100;
     display: flex;
+    flex-direction: column;
     justify-content: space-between;
     align-items: center;
     padding: 10px 20px;
@@ -148,6 +149,21 @@
     box-sizing: border-box;
   }
 
+  .mobileLogoIconContainer {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+  }
+
+  .mobileNavBackground {
+    height: 100vh;
+    width: 100%;
+    justify-content: center;
+    padding-top: 2rem;
+  }
+
   .hamburger,
   .cross {
     display: flex;
@@ -240,11 +256,12 @@
 
   .mobileNav a,
   .meetupLink {
-    font-size: 12px;
+    font-size: 1.5rem;
     font-weight: 700;
     color: hsl(var(--blue));
     text-decoration: none;
-    line-height: 14.09px;
+    text-align: center;
+    margin: 1rem;
 
     &:hover {
       color: hsl(var(--light-blue));

src/app/components/navbar/navbar.module.css

@@ -42,6 +42,7 @@ export default function Navbar() {
       <Link href={link.link} key={link.id}>
         <div
           className={isMobile ? link.mobileClassName : link.desktopClassName}
+          onClick={toggleNav}
         >
           {link.label}
         </div>
@@ -51,44 +52,49 @@ export default function Navbar() {
   return (
     <div className={styles.nav}>
       <nav className={styles.mobileNavBar}>
-        <div className={styles.mobileLogo}>
-          <Link href='/'>
-            <div className={styles.homeLink}>
-              <Image
-                src='/assets/dsd-circle-logo.png'
-                alt='Logo'
-                width={45}
-                height={45}
-              />
-              <span className={styles.home}>{internalLinks.home.label}</span>
+        <div className={styles.mobileLogoIconContainer}>
+          <div className={styles.mobileLogo}>
+            <Link href='/'>
+              <div
+                className={styles.homeLink}
+                onClick={() => setIsNavVisible(false)}
+              >
+                <Image
+                  src='/assets/dsd-circle-logo.png'
+                  alt='Logo'
+                  width={45}
+                  height={45}
+                />
+                <span className={styles.home}>{internalLinks.home.label}</span>
+              </div>
+            </Link>
+          </div>
+          {isNavVisible ? (
+            <div className={styles.crossContainer}>
+              <div
+                onClick={toggleNav}
+                className={styles.cross}
+                data-testid='navbar-collapse'
+              >
+                <div className={styles.line}></div>
+                <div className={styles.line}></div>
+              </div>
             </div>
-          </Link>
-        </div>
-        {isNavVisible ? (
-          <div className={styles.crossContainer}>
+          ) : (
             <div
+              className={styles.hamburger}
               onClick={toggleNav}
-              className={styles.cross}
-              data-testid='navbar-collapse'
+              data-testid='navbar-expand'
             >
               <div className={styles.line}></div>
               <div className={styles.line}></div>
+              <div className={styles.line}></div>
             </div>
-          </div>
-        ) : (
-          <div
-            className={styles.hamburger}
-            onClick={toggleNav}
-            data-testid='navbar-expand'
-          >
-            <div className={styles.line}></div>
-            <div className={styles.line}></div>
-            <div className={styles.line}></div>
-          </div>
-        )}
+          )}
+        </div>
         <div
           className={styles.mobileNavBackground}
-          style={{ display: isNavVisible ? 'block' : 'none' }}
+          style={{ display: isNavVisible ? 'flex' : 'none' }}
         >
           <div className={styles.mobileNav}>
             {navLinks(true)}