Adapt Navigasyon component to nextjs 13 and change soumet route to pwopose

components/navigasyon.js

@@ -38,19 +38,19 @@ const Appdiv = styled('div')((
 
 const tabRouteHref = [
   '/',
-  '/soutyen',
+  '/sipote',
   '/paroles',
-  '/awtis?paj&paj=1',
-  '/soumet'
+  '/awtis',
+  '/pwopose'
 ]
 
-const tabRouteAs = [
-  '/',
-  '/soutyen',
-  '/paroles',
-  '/awtis/paj/1',
-  '/soumet',
-]
+const tabPath = {
+  akey: 0,
+  sipote: 1,
+  paroles: 2,
+  awtis: 3,
+  pwopose: 4
+}
 
 function TabPanel(props) {
   const {children, value, index, ...other} = props
@@ -85,8 +85,12 @@ function a11yProps(index) {
   }
 }
 
-export default function Navigasyon({selectedTab}) {
+export default function Navigasyon() {
   const router = useRouter()
+  const pathname = usePathname()
+  const selectedPath = pathname === '/' ? 'akey' : pathname.split('/')[1]
+  const selectedTab = tabPath[selectedPath]
+
   const isMobile = useMediaQuery('(max-width:422px)')
   const [value, setValue] = useState(0)
 
@@ -94,14 +98,14 @@ export default function Navigasyon({selectedTab}) {
     setValue(newValue)
 
     if (newValue !== selectedTab) {
-      router.push(tabRouteHref[newValue], tabRouteAs[newValue]).then(() => window.scrollTo(0, 0))
+      router.push(tabRouteHref[newValue])
     }
   }
 
   return (
     <Appdiv>
       <div className={classes.root}>
-        <AppBar style={{zIndex: 10, boxShadow: 'none'}} position='fixed' color='default'>
+        <AppBar style={{zIndex: 1, boxShadow: 'none'}} position='fixed' color='default'>
           <Tabs
             allowScrollButtonsMobile
             scrollButtons
@@ -122,7 +126,7 @@ export default function Navigasyon({selectedTab}) {
             <Tab icon={<VolunteerActivismIcon />} aria-label='Nous soutenir' {...a11yProps(1)} />
             <Tab icon={<MusicNoteIcon />} aria-label='Paroles' {...a11yProps(2)} />
             <Tab icon={<RecordVoiceOverIcon />} aria-label='Artistes' {...a11yProps(3)} />
-            <Tab icon={<EditNoteIcon />} aria-label='Soumettre' {...a11yProps(4)} />
+            <Tab icon={<EditNoteIcon />} aria-label='Proposer des paroles' {...a11yProps(4)} />
           </Tabs>
         </AppBar>
         <TabPanel value={value} index={0} />
@@ -134,7 +138,3 @@ export default function Navigasyon({selectedTab}) {
     </Appdiv>
   )
 }
-
-Navigasyon.propTypes = {
-  selectedTab: PropTypes.number.isRequired
-}