feat: add mobile navbar to home page

src/app/page.tsx

@@ -7,6 +7,7 @@ import '@/app/Home.scss';
 import Image from 'next/image';
 import Flashlight from '@/components/Flashlight/Flashlight';
 import Controls from '@/components/FlashlightControls/Controls';
+import MobileHomeNav from '@/components/Navbar/MobileHomeNav/MobileHomeNav';
 
 gsap.registerPlugin(useGSAP);
 
@@ -720,6 +721,7 @@ export default function Page() {
           </div>
         </div>
       </div>
+      <MobileHomeNav visible={folderOpenned} />
     </div>
   );
 }

src/components/Navbar/MobileHomeNav/MobileHomeNav.scss

@@ -0,0 +1,63 @@
+#mobile-nav-button-container {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-family: $p-font;
+  padding-block: 1rem;
+  font-weight: 500;
+  font-size: 1.25rem;
+  justify-content: center;
+
+  @media (min-width: 480px) {
+    gap: 1rem;
+  }
+
+  @media (min-width: 580px) {
+    display: none;
+  }
+
+  &.hide {
+    display: none;
+  }
+
+  a {
+    border-radius: 48px;
+    border: 2px solid $white;
+    display: flex;
+    align-items: center;
+  }
+
+  #about-button {
+    gap: 5px;
+    padding: 6px;
+    padding-left: 10px;
+    padding-right: 12px;
+
+    @media (min-width: $desktop-breakpoint) {
+      gap: 10px;
+      padding: 6px;
+      padding-left: 10px;
+      padding-right: 12px;
+    }
+  }
+
+  #register-button {
+    background-color: $white;
+    color: black;
+    text-transform: uppercase;
+    padding: 6px;
+    padding-inline: 1rem;
+  }
+
+  a {
+    text-decoration: none;
+  }
+
+  .longer-about-text {
+    display: none;
+
+    @media (min-width: $tablet-breakpoint) {
+      display: block;
+    }
+  }
+}

src/components/Navbar/MobileHomeNav/MobileHomeNav.tsx

@@ -0,0 +1,25 @@
+import Image from 'next/image';
+import Link from 'next/link';
+import './MobileHomeNav.scss';
+
+export default function MobileHomeNav({ visible }: { visible: boolean }) {
+  return (
+    <div id="mobile-nav-button-container" className={visible ? '' : 'hide'}>
+      <Link id="about-button" href="/about">
+        <span>
+          <Image
+            src="images/icons/info-icon.svg"
+            width={24}
+            height={24}
+            alt="Info Icon"
+            aria-hidden="true"
+          />
+        </span>
+        About
+      </Link>
+      <Link id="register-button" href="/register">
+        Register
+      </Link>
+    </div>
+  );
+}

src/components/Navbar/Navbar.scss

@@ -22,7 +22,8 @@
 
       #nav-logo-current-page {
         svg {
-          width: 130px;
+          width: 260px;
+          transition: width 0.3s;
 
           @media (min-width: $tablet-breakpoint) {
             width: 260px;
@@ -33,11 +34,12 @@
           display: none;
         }
       }
+    }
+    #nav-button-container {
+      display: none;
 
-      #nav-button-container #register-button {
-        @media (min-width: $desktop-breakpoint) {
-          padding: 1.125rem 2rem;
-        }
+      @media (min-width: 580px) {
+        display: flex;
       }
     }
   }
@@ -116,12 +118,4 @@
       }
     }
   }
-
-  #nav-home-button-container {
-    display: none;
-
-    @media (min-width: 580px) {
-      display: flex;
-    }
-  }
 }

src/components/Navbar/Navbar.tsx

@@ -4,6 +4,7 @@ import Image from 'next/image';
 import './Navbar.scss';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
+import { useEffect, useRef } from 'react';
 import StrideLogo from '../Register/StrideLogo';
 import DCOLogo from './Logos/DCOLogo';
 
@@ -17,6 +18,24 @@ export default function Navbar() {
     return page.charAt(0).toUpperCase() + page.slice(1) || '';
   };
 
+  useEffect(() => {
+    const handleScroll = () => {
+      const logo = document.getElementById('nav-stride-logo');
+      if (!logo) return;
+      if (window.scrollY > 0) {
+        logo.style.width = '130px';
+      } else {
+        logo.style.width = '260px';
+      }
+    };
+
+    window.addEventListener('scroll', handleScroll);
+
+    return () => {
+      window.removeEventListener('scroll', handleScroll);
+    };
+  }, []);
+
   return (
     <nav id="navbar" className={pathname === '/' ? 'home' : ''}>
       <Link id="nav-logo-container" href="/">

src/components/Register/StrideLogo.tsx

@@ -2,10 +2,12 @@ import { SVGProps } from 'react';
 
 export default function StrideLogo({
   width,
+  ref,
   ...props
 }: SVGProps<SVGSVGElement>) {
   return (
     <svg
+      ref={ref}
       {...props}
       viewBox="0 0 209 49"
       fill="none"