Cédric FAMIBELLE-PRONZOLA
133 lines
3.2 KiB
JavaScript
133 lines
3.2 KiB
JavaScript
import {useState} from 'react'
|
|
import PropTypes from 'prop-types'
|
|
import {useRouter} from 'next/router'
|
|
|
|
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'
|
|
|
|
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 = [
|
|
'/',
|
|
'/paroles',
|
|
'/awtis?paj&paj=1',
|
|
'/soumet',
|
|
'/soutyen'
|
|
]
|
|
|
|
const tabRouteAs = [
|
|
'/',
|
|
'/paroles',
|
|
'/awtis/paj/1',
|
|
'/soumet',
|
|
'/soutyen'
|
|
]
|
|
|
|
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({selectedTab}) {
|
|
const router = useRouter()
|
|
const isMobile = useMediaQuery('(max-width:422px)')
|
|
const [value, setValue] = useState(0)
|
|
|
|
const handleChange = (event, newValue) => {
|
|
setValue(newValue)
|
|
|
|
if (newValue !== selectedTab) {
|
|
router.push(tabRouteHref[newValue], tabRouteAs[newValue]).then(() => window.scrollTo(0, 0))
|
|
}
|
|
}
|
|
|
|
return (
|
|
<Appdiv>
|
|
<div className={classes.root}>
|
|
<AppBar style={{zIndex: 9999, boxShadow: 'none'}} position='fixed' color='default'>
|
|
<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 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)} />
|
|
</Tabs>
|
|
</AppBar>
|
|
<TabPanel value={value} index={0} />
|
|
<TabPanel value={value} index={1} />
|
|
<TabPanel value={value} index={2} />
|
|
<TabPanel value={value} index={3} />
|
|
<TabPanel value={value} index={4} />
|
|
</div>
|
|
</Appdiv>
|
|
)
|
|
}
|
|
|
|
Navigasyon.propTypes = {
|
|
selectedTab: PropTypes.number.isRequired
|
|
}
|