diff --git a/src/components/Header/HeaderClient.tsx b/src/components/Header/HeaderClient.tsx index 552cdb6d..05e71d9d 100644 --- 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 index 64d1dd33..49b47d28 100644 --- 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 (
)} - {data.nextStep !== null && !isMenuOpen && ( + {data.isSignedIn && data.nextStep !== null && !isMenuOpen && (
@@ -65,7 +73,7 @@ export default function HeaderMobileClient({
- {data.nextStep === 'signup' && ( + {data.isSignedIn && data.nextStep === 'signup' && ( )} - {data.nextStep === 'payment' && ( + {data.isSignedIn && data.nextStep === 'payment' && ( )} + + + {/* Links for sign up, sign in, sign out */} + {!data.isSignedIn && } + {data.isSignedIn && ( + + Sign Out + + )}
)} diff --git a/src/components/Header/components/Links.tsx b/src/components/Header/components/Links.tsx index 232cde8f..c1cf14c0 100644 --- 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 )} - - Settings - + {data.isSignedIn && ( + + Settings + + )} {data.isAdmin && ( Admin Panel diff --git a/src/components/Header/components/SignInJoin.tsx b/src/components/Header/components/SignInJoin.tsx index 51daa3f2..a35a257a 100644 --- 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 ( <>