Create Navigasyon component

2020-12-11 01:36:54 +01:00
parent 93ab45e0bb
commit 755ab520cb
1 changed files with 106 additions and 0 deletions
@@ -0,0 +1,106 @@
+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 PersonIcon from '@material-ui/icons/Person'
+import MenuBookIcon from '@material-ui/icons/MenuBook'
+import Typography from '@material-ui/core/Typography'
+import Box from '@material-ui/core/Box'
+
+const tabRouteHref = [
+  '/',
+  '/awtis?paj&paj=1',
+  '/teks'
+]
+
+const tabRouteAs = [
+  '/',
+  '/awtis/paj/1',
+  '/teks'
+]
+
+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)
+
+    router.push(tabRouteHref[newValue], tabRouteAs[newValue])
+  }
+
+  return (
+    <div className={classes.root}>
+      <AppBar position='fixed' color='default'>
+        <Tabs
+          value={selectedTab}
+          variant='fullWidth'
+          scrollButtons='on'
+          indicatorColor='secondary'
+          textColor='secondary'
+          aria-label='scrollable force tabs example'
+          onChange={handleChange}
+        >
+          <Tab label='Kay-la' icon={<HomeIcon style={{fontSize: 30}} />} {...a11yProps(0)} />
+          <Tab label='Awtis' icon={<PersonIcon style={{fontSize: 30}} />} {...a11yProps(1)} />
+          <Tab label='Tèks' icon={<MenuBookIcon style={{fontSize: 30}} />} {...a11yProps(2)} />
+        </Tabs>
+      </AppBar>
+      <TabPanel value={value} index={0} />
+      <TabPanel value={value} index={1} />
+      <TabPanel value={value} index={2} />
+    </div>
+  )
+}
+
+Navigasyon.propTypes = {
+  selectedTab: PropTypes.number.isRequired
+}