Cédric FAMIBELLE-PRONZOLA
114 lines
3.0 KiB
JavaScript
114 lines
3.0 KiB
JavaScript
import React from 'react'
|
|
import PropTypes from 'prop-types'
|
|
import {useRouter} from 'next/router'
|
|
|
|
import {makeStyles} from '@material-ui/core/styles'
|
|
import AppBar from '@material-ui/core/AppBar'
|
|
import Tabs from '@material-ui/core/Tabs'
|
|
import Tab from '@material-ui/core/Tab'
|
|
import HomeIcon from '@material-ui/icons/Home'
|
|
import MenuBookIcon from '@material-ui/icons/MenuBook'
|
|
import RecordVoiceOverIcon from '@material-ui/icons/RecordVoiceOver'
|
|
import PlaylistAddIcon from '@material-ui/icons/PlaylistAdd'
|
|
import Typography from '@material-ui/core/Typography'
|
|
import Box from '@material-ui/core/Box'
|
|
|
|
const tabRouteHref = [
|
|
'/',
|
|
'/awtis?paj&paj=1',
|
|
'/teks',
|
|
'/soumet'
|
|
]
|
|
|
|
const tabRouteAs = [
|
|
'/',
|
|
'/awtis/paj/1',
|
|
'/teks',
|
|
'/soumet'
|
|
]
|
|
|
|
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}`
|
|
}
|
|
}
|
|
|
|
const useStyles = makeStyles(theme => ({
|
|
root: {
|
|
marginBottom: 50,
|
|
flexGrow: 1,
|
|
width: '100%',
|
|
backgroundColor: theme.palette.background.paper
|
|
}
|
|
}))
|
|
|
|
export default function Navigasyon({selectedTab}) {
|
|
const router = useRouter()
|
|
const classes = useStyles()
|
|
const [value, setValue] = React.useState(0)
|
|
|
|
const handleChange = (event, newValue) => {
|
|
setValue(newValue)
|
|
|
|
if (newValue !== selectedTab) {
|
|
router.push(tabRouteHref[newValue], tabRouteAs[newValue]).then(() => window.scrollTo(0, 0))
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className={classes.root}>
|
|
<AppBar position='fixed' color='default'>
|
|
<Tabs
|
|
value={selectedTab}
|
|
variant='fullWidth'
|
|
scrollButtons='on'
|
|
indicatorColor='primary'
|
|
textColor='primary'
|
|
aria-label='scrollable force tabs example'
|
|
onChange={handleChange}
|
|
>
|
|
<Tab label='Kay-la' icon={<HomeIcon style={{fontSize: 30}} />} {...a11yProps(0)} />
|
|
<Tab label='Awtis' icon={<RecordVoiceOverIcon style={{fontSize: 30}} />} {...a11yProps(1)} />
|
|
<Tab label='Tèks' icon={<MenuBookIcon style={{fontSize: 30}} />} {...a11yProps(2)} />
|
|
<Tab label='Soumèt' icon={<PlaylistAddIcon style={{fontSize: 30}} />} {...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>
|
|
)
|
|
}
|
|
|
|
Navigasyon.propTypes = {
|
|
selectedTab: PropTypes.number.isRequired
|
|
}
|