pawol.nu/components/navigasyon.js

'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>
  )
}