fix(header): mobile menu has correct links and behaviour

compsci-adl · Feb 19, 2024 · 4ba9491 · 4ba9491
1 parent 6bc6795
commit 4ba9491
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 8 deletions.
diff --git a/src/components/Header/HeaderClient.tsx b/src/components/Header/HeaderClient.tsx
@@ -12,7 +12,7 @@ import FancyRectangle from '../FancyRectangle';
 import { Links, MenuLinks } from './components/Links';
 import LogoTitle from './components/LogoTitle';
 import ScrollShader from './components/ScrollShader';
-import SignInJoin from './components/SignInJoin';
+import { SignInJoin } from './components/SignInJoin';
 
 function UserButton({ data }: { data: HeaderData }) {
     const [isMenuOpen, setMenuOpen] = useState(false);

diff --git a/src/components/Header/HeaderMobileClient.tsx b/src/components/Header/HeaderMobileClient.tsx
@@ -1,5 +1,6 @@
 'use client';
 
+import { useClerk } from '@clerk/clerk-react';
 import Link from 'next/link';
 import { useState } from 'react';
 import { IoMdClose, IoMdMenu } from 'react-icons/io';
@@ -8,6 +9,7 @@ import FancyRectangle from '../FancyRectangle';
 import { Links, MenuLinks } from './components/Links';
 import LogoTitle from './components/LogoTitle';
 import ScrollShader from './components/ScrollShader';
+import { SignInJoinMobile } from './components/SignInJoin';
 
 export default function HeaderMobileClient({
     data,
@@ -24,6 +26,12 @@ export default function HeaderMobileClient({
         setIsMenuOpen(false);
     };
 
+    const { signOut } = useClerk();
+    const handleSignOut = async () => {
+        await signOut();
+        setIsMenuOpen(false);
+    };
+
     return (
         <div
             className={`${className} fixed z-[9999] w-full transition-all ${isMenuOpen ? 'h-full bg-white/95' : ''}`}
@@ -50,7 +58,7 @@ export default function HeaderMobileClient({
                             ) : (
                                 <IoMdMenu aria-label="Menu" />
                             )}
-                            {data.nextStep !== null && !isMenuOpen && (
+                            {data.isSignedIn && data.nextStep !== null && !isMenuOpen && (
                                 <span className="absolute -right-2 -top-2 z-50 flex h-3 w-3">
                                     <div className="absolute inline-flex h-full w-full animate-ping rounded-full bg-red-400 opacity-75" />
                                     <div className="relative inline-flex h-3 w-3 rounded-full bg-red-500" />
@@ -65,7 +73,7 @@ export default function HeaderMobileClient({
                         <div className="mt-12 flex flex-col items-center gap-8 text-4xl text-grey">
                             <Links onClick={closeMenu} />
                             <div className="mt-4 h-0.5 w-full bg-grey" />
-                            {data.nextStep === 'signup' && (
+                            {data.isSignedIn && data.nextStep === 'signup' && (
                                 <Link
                                     href="/join"
                                     className="block font-bold underline"
@@ -74,7 +82,7 @@ export default function HeaderMobileClient({
                                     Continue Signing Up
                                 </Link>
                             )}
-                            {data.nextStep === 'payment' && (
+                            {data.isSignedIn && data.nextStep === 'payment' && (
                                 <Link
                                     href="/settings"
                                     className="block font-bold underline"
@@ -83,7 +91,16 @@ export default function HeaderMobileClient({
                                     Continue to payment
                                 </Link>
                             )}
+
                             <MenuLinks data={data} onClick={closeMenu} />
+
+                            {/* Links for sign up, sign in, sign out */}
+                            {!data.isSignedIn && <SignInJoinMobile onClick={closeMenu} />}
+                            {data.isSignedIn && (
+                                <Link href="/" onClick={handleSignOut}>
+                                    Sign Out
+                                </Link>
+                            )}
                         </div>
                     </>
                 )}

diff --git a/src/components/Header/components/Links.tsx b/src/components/Header/components/Links.tsx
@@ -17,9 +17,11 @@ export function MenuLinks({ data, onClick }: { data: HeaderData; onClick?: () =>
                     CS Club Drive
                 </Link>
             )}
-            <Link href="/settings" className="block hover:underline" onClick={onClick}>
-                Settings
-            </Link>
+            {data.isSignedIn && (
+                <Link href="/settings" className="block hover:underline" onClick={onClick}>
+                    Settings
+                </Link>
+            )}
             {data.isAdmin && (
                 <Link href="/admin" className="block hover:underline" onClick={onClick}>
                     Admin Panel

diff --git a/src/components/Header/components/SignInJoin.tsx b/src/components/Header/components/SignInJoin.tsx
@@ -1,6 +1,7 @@
+import Link from 'next/link';
 import Button from '../../Button';
 
-export default function SignInJoin() {
+export function SignInJoin() {
     return (
         <>
             <Button colour="orange" href="/signin">
@@ -12,3 +13,16 @@ export default function SignInJoin() {
         </>
     );
 }
+
+export function SignInJoinMobile({ onClick }: { onClick?: () => void }) {
+    return (
+        <>
+            <Link onClick={onClick} href="/signin">
+                Sign In
+            </Link>
+            <Link onClick={onClick} href="/join">
+                Join Us
+            </Link>
+        </>
+    );
+}