Made it so clicking on the text "Harp" as well as the logo takes you …

…back to the landing page
COSC-499-W2023 · Nov 5, 2023 · 6641a26 · 6641a26
1 parent 31d9e0d
commit 6641a26
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 9 deletions.
diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
@@ -2,22 +2,27 @@
 
 import HeaderSignOutButtons from '@/components/HeaderSignOutButtons'
 import HeaderSignInButtons from '@/components/HeaderSignInButtons'
-import { AppBar, Toolbar, Typography } from '@mui/material'
+import { AppBar, Box, Toolbar, Typography } from '@mui/material'
 import HeaderLogo from '../HeaderLogo'
-import { type SessionContextValue, useSession } from 'next-auth/react'
+import { type SessionContextValue } from 'next-auth/react'
+import { useRouter } from 'next/navigation'
 
 export type HeaderProps = {} & SessionContextValue
 
 export default function Header(props: HeaderProps) {
     const { status } = props
+    const router = useRouter()
 
     return (
         <AppBar data-cy='landing-page-app-bar' position='static' sx={{ backgroundColor: 'white' }}>
             <Toolbar disableGutters>
-                <HeaderLogo />
-                <Typography color='primary' variant='h4' component='div' sx={{ flexGrow: 1, fontWeight: 'bold' }}>
-                    Harp
-                </Typography>
+                <Box sx={{ display: 'flex', alignItems: 'center' }} onClick={() => router.push('/')}>
+                    <HeaderLogo />
+                    <Typography color='primary' variant='h4' component='div' sx={{ fontWeight: 'bold' }}>
+                        Harp
+                    </Typography>
+                </Box>
+                <Box sx={{ flexGrow: 1 }} />
                 {status === 'authenticated' ? <HeaderSignOutButtons /> : <HeaderSignInButtons />}
             </Toolbar>
         </AppBar>

diff --git a/src/components/HeaderLogo/index.tsx b/src/components/HeaderLogo/index.tsx
@@ -2,12 +2,10 @@
 
 import { Box } from '@mui/material'
 import Logo from '@/components/Logo'
-import { useRouter } from 'next/navigation'
 
 const HeaderLogo = () => {
-    const router = useRouter()
     return (
-        <Box sx={{ m: 2 }} onClick={() => router.push('/')}>
+        <Box sx={{ m: 2 }}>
             <Logo fontSize={30} />
         </Box>
     )