fix: footer links and menu overlay are displayed better on mobile

compsci-adl · Feb 25, 2025 · 715bc12 · 715bc12
1 parent a8c8c74
commit 715bc12
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 22 deletions.
diff --git a/package.json b/package.json
@@ -65,6 +65,7 @@
     "eslint-plugin-prettier": "^5.2.1",
     "lint-staged": "^15.3.0",
     "postcss": "^8.4.49",
+    "prettier": "^3.5.2",
     "prettier-plugin-jsdoc": "^1.3.0",
     "prettier-plugin-tailwindcss": "^0.6.9",
     "simple-git-hooks": "^2.11.1",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -40,7 +40,7 @@ export default function RootLayout({ children }: RootLayoutProps) {
                     src="https://umami.csclub.org.au/script.js"
                     data-website-id={env.NEXT_PUBLIC_UMAMI_WEBSITE_ID}
                 />
-                <body className="overflow-x-hidden bg-grey text-white">
+                <body id="root" className="overflow-x-hidden bg-grey text-white">
                     <Header />
                     <div className="mx-auto min-h-screen w-responsive pb-6 pt-32 md:pt-40">
                         {children}

diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
@@ -12,7 +12,7 @@ export default function Footer() {
                     </p>
                 </div>
                 {/* Social Media Links */}
-                <div className="order-1 mb-4 flex justify-center space-x-4 text-2xl text-black md:order-2 md:mb-0 md:justify-end">
+                <div className="order-1 mb-4 flex flex-wrap justify-center gap-4 text-2xl text-black md:order-2 md:mb-0 md:flex-nowrap md:justify-end">
                     {LINKS.map((link, i) => (
                         <Link {...link} borderColour="yellow" key={i} />
                     ))}

diff --git a/src/components/Header/HeaderMobileClient.tsx b/src/components/Header/HeaderMobileClient.tsx
@@ -2,7 +2,7 @@
 
 import { logout } from '@/lib/actions';
 import Link from 'next/link';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { IoMdClose, IoMdMenu } from 'react-icons/io';
 import type { HeaderData } from '.';
 import FancyRectangle from '../FancyRectangle';
@@ -31,9 +31,20 @@ export default function HeaderMobileClient({
         setIsMenuOpen(false);
     };
 
+    useEffect(() => {
+        const rootDiv = document.getElementById('root')!;
+        if (isMenuOpen) {
+            rootDiv.classList.remove('overflow-y-scroll');
+            rootDiv.classList.add('overflow-y-hidden');
+        } else {
+            rootDiv.classList.add('overflow-y-scroll');
+            rootDiv.classList.remove('overflow-y-hidden');
+        }
+    }, [isMenuOpen]);
+
     return (
         <div
-            className={`${className} fixed z-[9999] w-full transition-all ${isMenuOpen ? 'h-full bg-white/95' : ''}`}
+            className={`${className} fixed z-[9999] w-full transition-all ${isMenuOpen ? 'h-dvh overflow-y-scroll bg-white/95' : ''}`}
         >
             <ScrollShader className={isMenuOpen ? 'hidden' : ''} />
             <div
@@ -69,7 +80,7 @@ export default function HeaderMobileClient({
                 {isMenuOpen && (
                     <>
                         <div className="mt-8 h-0.5 w-full bg-grey" />
-                        <div className="mt-12 flex flex-col items-center gap-8 text-4xl text-grey">
+                        <div className="mt-12 flex flex-col items-center gap-8 text-3xl text-grey md:text-4xl">
                             <Links onClick={closeMenu} />
                             <div className="mt-4 h-0.5 w-full bg-grey" />
                             {data.isSignedIn && data.nextStep === 'signup' && (