100 lines
2.6 KiB
JavaScript
100 lines
2.6 KiB
JavaScript
'use client'
|
|
|
|
import {useRouter, usePathname} from 'next/navigation'
|
|
|
|
import {styled} from '@mui/material/styles'
|
|
import AppBar from '@mui/material/AppBar'
|
|
import Tabs, {tabsClasses} from '@mui/material/Tabs'
|
|
import Tab from '@mui/material/Tab'
|
|
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 VolunteerActivismIcon from '@mui/icons-material/VolunteerActivism'
|
|
|
|
const PREFIX = 'navigasyon'
|
|
|
|
const classes = {
|
|
root: `${PREFIX}-root`
|
|
}
|
|
|
|
const Appdiv = styled('div')((
|
|
{
|
|
theme
|
|
}
|
|
) => ({
|
|
[`& .${classes.root}`]: {
|
|
flexGrow: 1,
|
|
width: '100%',
|
|
backgroundColor: theme.palette.background.paper
|
|
}
|
|
}))
|
|
|
|
const tabRouteHref = [
|
|
'/',
|
|
'/sipote',
|
|
'/paroles',
|
|
'/awtis'
|
|
]
|
|
|
|
const tabPath = {
|
|
akey: 0,
|
|
sipote: 1,
|
|
paroles: 2,
|
|
awtis: 3,
|
|
}
|
|
|
|
function a11yProps(index) {
|
|
return {
|
|
id: `scrollable-force-tab-${index}`,
|
|
'aria-controls': `scrollable-force-tabpanel-${index}`
|
|
}
|
|
}
|
|
|
|
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 handleChange = (event, newValue) => {
|
|
if (newValue !== selectedTab) {
|
|
router.push(tabRouteHref[newValue])
|
|
}
|
|
}
|
|
|
|
return (
|
|
<Appdiv>
|
|
<div className={classes.root}>
|
|
<AppBar style={{zIndex: 1, boxShadow: 'none'}} position='fixed' color='default'>
|
|
{selectedTab !== undefined && <Tabs
|
|
allowScrollButtonsMobile
|
|
scrollButtons
|
|
centered={Boolean(!isMobile)}
|
|
value={selectedTab}
|
|
indicatorColor='primary'
|
|
textColor='primary'
|
|
aria-label='tabs menu'
|
|
variant={isMobile ? 'scrollable' : 'fullWidth'}
|
|
sx={{
|
|
[`& .${tabsClasses.scrollButtons}`]: {
|
|
'&.Mui-disabled': {opacity: 0.3},
|
|
},
|
|
}}
|
|
onChange={handleChange}
|
|
>
|
|
<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)} />
|
|
</Tabs>
|
|
}
|
|
</AppBar>
|
|
</div>
|
|
</Appdiv>
|
|
)
|
|
}
|