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',
-  '/soutyen'
+  '/soumet'
 ]
 
 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 label='Paroles' {...a11yProps(1)} />
-            <Tab label='Artistes' {...a11yProps(2)} />
-            <Tab label='Soumettre' {...a11yProps(3)} />
-            <Tab label='Nous soutenir' {...a11yProps(4)} />
+            <Tab icon={<HomeIcon />} aria-label='Accueil' {...a11yProps(0)} />
+            <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)} />
           </Tabs>
         </AppBar>
         <TabPanel value={value} index={0} />