Change navigasyon menu order and remplace text by icons

components/navigasyon.js

@@ -10,6 +10,12 @@ import Typography from '@mui/material/Typography'
 import Box from '@mui/material/Box'
 import {useMediaQuery} from '@mui/material'
 
+import MusicNoteIcon from '@mui/icons-material/MusicNote'
+import RecordVoiceOverIcon from '@mui/icons-material/RecordVoiceOver'
+import HomeIcon from '@mui/icons-material/Home'
+import EditNoteIcon from '@mui/icons-material/EditNote'
+import VolunteerActivismIcon from '@mui/icons-material/VolunteerActivism'
+
 const PREFIX = 'navigasyon'
 
 const classes = {
@@ -30,18 +36,18 @@ const Appdiv = styled('div')((
 
 const tabRouteHref = [
   '/',
+  '/soutyen',
   '/paroles',
   '/awtis?paj&paj=1',
-  '/soumet',
+  '/soumet'
-  '/soutyen'
 ]
 
 const tabRouteAs = [
   '/',
+  '/soutyen',
   '/paroles',
   '/awtis/paj/1',
   '/soumet',
-  '/soutyen'
 ]
 
 function TabPanel(props) {
@@ -110,11 +116,11 @@ export default function Navigasyon({selectedTab}) {
             }}
             onChange={handleChange}
           >
-            <Tab label='Accueil' {...a11yProps(0)} />
+            <Tab icon={<HomeIcon />} aria-label='Accueil' {...a11yProps(0)} />
-            <Tab label='Paroles' {...a11yProps(1)} />
+            <Tab icon={<VolunteerActivismIcon />} aria-label='Nous soutenir' {...a11yProps(1)} />
-            <Tab label='Artistes' {...a11yProps(2)} />
+            <Tab icon={<MusicNoteIcon />} aria-label='Paroles' {...a11yProps(2)} />
-            <Tab label='Soumettre' {...a11yProps(3)} />
+            <Tab icon={<RecordVoiceOverIcon />} aria-label='Artistes' {...a11yProps(3)} />
-            <Tab label='Nous soutenir' {...a11yProps(4)} />
+            <Tab icon={<EditNoteIcon />} aria-label='Soumettre' {...a11yProps(4)} />
           </Tabs>
         </AppBar>
         <TabPanel value={value} index={0} />

pages/awtis/[slug].js

@@ -48,7 +48,7 @@ export default function SlugAwtis({errorCode, error404, errorMessage, anAwtis})
       imageWidth={formatKouveti() ? formatKouveti().width : null}
       imageHeight={formatKouveti() ? formatKouveti().height : null}
       imageMime={formatKouveti() ? formatKouveti().mime : null}
-      title={`${anAwtis.attributes.alias} - Paroles et Traductions`} tab={2} slug={`awtis/${anAwtis.attributes.slug}`}
+      title={`${anAwtis.attributes.alias} - Paroles et Traductions`} tab={3} slug={`awtis/${anAwtis.attributes.slug}`}
     >
       <Box sx={{display: 'flex', flexDirection: 'column', minHeight: '100vh'}}>
         <AwtisDetay anAwtis={anAwtis.attributes} />

pages/awtis/index.js

@@ -23,7 +23,7 @@ export default function Awtis({errorCode, error404, errorMessage, pajTotal, awti
   }
 
   return (
-    <HeadLayout title='Awtis - Liste des artistes' summary='Liste des artistes ayant une ou plusieurs œuvres présentes sur le site.' tab={2} slug='awtis'>
+    <HeadLayout title='Awtis - Liste des artistes' summary='Liste des artistes ayant une ou plusieurs œuvres présentes sur le site.' tab={3} slug='awtis'>
       <Box sx={{display: 'flex', flexDirection: 'column', minHeight: '100vh'}}>
         <Pajinasyon pajTotal={pajTotal} paj={paj} />
         <ChecheAwtis />

pages/paroles/[slug].js

@@ -49,7 +49,7 @@ export default function SlugTeks({hasError, errorMessage, parole, slug}) {
       imageWidth={formatKouveti() ? formatKouveti().width : null}
       imageHeight={formatKouveti() ? formatKouveti().height : null}
       imageMime={formatKouveti() ? formatKouveti().mime : null}
-      title={`${artistes} - ${parole.attributes.titre} | Paroles et Traductions`} tab={1} slug={`paroles/${slug}`}
+      title={`${artistes} - ${parole.attributes.titre} | Paroles et Traductions`} tab={2} slug={`paroles/${slug}`}
       summary={summary}
     >
       <TeksDrawer parole={parole.attributes} paroleId={parole.id} slug={slug} />

pages/paroles/index.js

@@ -14,7 +14,7 @@ export default function Teks({errorCode, errorMessage, denyeTeks}) {
   }
 
   return (
-    <HeadLayout title='Paroles et Traductions' summary='Retrouvez les paroles et traductions de vos chansons préférées.' tab={1} slug='paroles'>
+    <HeadLayout title='Paroles et Traductions' summary='Retrouvez les paroles et traductions de vos chansons préférées.' tab={2} slug='paroles'>
       <TeksDrawer denyeTeks={denyeTeks} />
     </HeadLayout>
   )

pages/soumet.js

@@ -71,7 +71,7 @@ export default function Soumet({code}) {
   }, [username])
 
   return (
-    <HeadLayout title='Soumèt - Soumettre un texte' summary='Proposez la transcription d’un texte, accompagnée d’une ou plusieurs traductions.' tab={3} slug='soumet'>
+    <HeadLayout title='Soumèt - Soumettre un texte' summary='Proposez la transcription d’un texte, accompagnée d’une ou plusieurs traductions.' tab={4} slug='soumet'>
       <Box sx={{display: 'flex', flexDirection: 'column', minHeight: '100vh'}}>
         <Box sx={{flexGrow: 1, marginTop: 1, marginBottom: 10}}>
           {!session && !code && (

pages/soutyen.js

@@ -117,7 +117,7 @@ export default function Soutyen({paymentStatus}) {
     <HeadLayout
       title='Soutenir Organisation KA Internationale !'
       summary='Vous pouvez nous soutenir via Liberapay, PayPal ou directement par CB sur le site.'
-      tab={4}
+      tab={1}
       slug='soutyen'
       imageUrl='/uploads/soutyen_8246fb700e.png'
       imageWidth={500}
@@ -129,7 +129,6 @@ export default function Soutyen({paymentStatus}) {
             <Typography gutterBottom sx={{fontWeight: 'bold'}} textAlign='center' variant='h4' component='h1'>
               Soutenir Organisation KA Internationale !
             </Typography>
-            <Presantasyon />
             <Paper sx={{padding: 2, marginTop: 3}}>
               <Box sx={{textAlign: 'center'}}>
                 <PaymentMethod
@@ -152,6 +151,7 @@ export default function Soutyen({paymentStatus}) {
                 />
               </Box>
             </Paper>
+            <Presantasyon />
           </Container>
         </Box>
         <Footer />