137 lines
3.5 KiB
JavaScript
137 lines
3.5 KiB
JavaScript
'use client'
|
|
|
|
import {useState} from 'react'
|
|
import PropTypes from 'prop-types'
|
|
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 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 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 TabPanel(props) {
|
|
const {children, value, index, ...other} = props
|
|
|
|
return (
|
|
<div
|
|
role='tabpanel'
|
|
hidden={value !== index}
|
|
id={`scrollable-force-tabpanel-${index}`}
|
|
aria-labelledby={`scrollable-force-tab-${index}`}
|
|
{...other}
|
|
>
|
|
{value === index && (
|
|
<Box p={3}>
|
|
<Typography component='div'>{children}</Typography>
|
|
</Box>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
TabPanel.propTypes = {
|
|
children: PropTypes.node,
|
|
index: PropTypes.any.isRequired,
|
|
value: PropTypes.any.isRequired
|
|
}
|
|
|
|
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 [value, setValue] = useState(0)
|
|
|
|
const handleChange = (event, newValue) => {
|
|
setValue(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>
|
|
<TabPanel value={value} index={0} />
|
|
<TabPanel value={value} index={1} />
|
|
<TabPanel value={value} index={2} />
|
|
<TabPanel value={value} index={3} />
|
|
</div>
|
|
</Appdiv>
|
|
)
|
|
}
|