Adapt Footer component to nextjs 13

components/footer.js

@@ -1,6 +1,13 @@
+'use client'
+
 import {useState} from 'react'
+import {usePathname} from 'next/navigation'
 import {styled} from '@mui/material/styles'
-import {Box, Container, Link, Typography, useMediaQuery} from '@mui/material'
+import Box from '@mui/material/Box'
+import Container from '@mui/material/Container'
+import Typography from '@mui/material/Typography'
+import Button from '@mui/material/Button'
+import {useMediaQuery} from '@mui/material'
 
 import {rezoLis} from '../lib/rezo-lis'
 
@@ -32,26 +39,28 @@ const Root = styled('div')((
 }))
 
 export default function Footer() {
+  const pathname = usePathname()
   const [open, setOpen] = useState(false)
   const isMobile = useMediaQuery('(max-width:527px)')
+  const selectedPath = pathname === '/' ? 'akey' : pathname.split('/')[1]
 
   return (
     (
       <Root>
         <CGUDialog open={open} setOpen={setOpen} />
-        <footer id='cgu' className={classes.footer}>
+        <footer>
-          <Container sx={{display: 'flex', justifyContent: isMobile ? 'center' : 'space-between', alignItems: 'center', flexDirection: isMobile ? 'column-reverse' : ''}}>
+          <Box sx={{ml: selectedPath === 'paroles' && !isMobile ? '240px' : ''}} id='cgu' className={classes.footer}>
-            <Box sx={{textAlign: isMobile ? 'center' : '', marginTop: isMobile ? '1em' : ''}}>
+            <Container sx={{display: 'flex', justifyContent: isMobile ? 'center' : 'space-between', alignItems: 'center', flexDirection: isMobile ? 'column-reverse' : ''}}>
-              <Typography className={classes.text} align='center' variant='body1'>
+              <Box sx={{textAlign: isMobile ? 'center' : '', marginTop: isMobile ? '1em' : ''}}>
-                <Link underline='hover' href='#cgu' onClick={() => setOpen(true)}>
+                <Button color='primary' onClick={() => setOpen(true)}>
-                  Voir les CGU et la politique de confidentialité
+                  <Typography variant='button' sx={{fontWeight: 'bold'}}>Voir les CGU et la politique de confidentialité</Typography>
-                </Link>
+                </Button>
-              </Typography>
+              </Box>
-            </Box>
+              <Box sx={{display: 'flex', justifyContent: 'center'}}>
-            <Box sx={{display: 'flex', justifyContent: 'center'}}>
+                {rezoLis.map(rezo => <Rezo key={rezo.tit} rezo={rezo} />)}
-              {rezoLis.map(rezo => <Rezo key={rezo.tit} rezo={rezo} />)}
+              </Box>
-            </Box>
+            </Container>
-          </Container>
+          </Box>
         </footer>
       </Root>
     )