Fix AppBar display

This commit is contained in:
Cédric FAMIBELLE-PRONZOLA
2022-01-20 20:29:11 +04:00
parent 028ab41080
commit 934d4d250c
+28 -27
View File
@@ -19,13 +19,12 @@ const classes = {
root: `${PREFIX}-root` root: `${PREFIX}-root`
} }
const Root = styled('div')(( const Appdiv = styled('div')((
{ {
theme theme
} }
) => ({ ) => ({
[`& .${classes.root}`]: { [`& .${classes.root}`]: {
marginBottom: 50,
flexGrow: 1, flexGrow: 1,
width: '100%', width: '100%',
backgroundColor: theme.palette.background.paper backgroundColor: theme.palette.background.paper
@@ -50,7 +49,7 @@ function TabPanel(props) {
const {children, value, index, ...other} = props const {children, value, index, ...other} = props
return ( return (
<Root <div
role='tabpanel' role='tabpanel'
hidden={value !== index} hidden={value !== index}
id={`scrollable-force-tabpanel-${index}`} id={`scrollable-force-tabpanel-${index}`}
@@ -62,7 +61,7 @@ function TabPanel(props) {
<Typography component='div'>{children}</Typography> <Typography component='div'>{children}</Typography>
</Box> </Box>
)} )}
</Root> </div>
) )
} }
@@ -93,29 +92,31 @@ export default function Navigasyon({selectedTab}) {
} }
return ( return (
<div className={classes.root}> <Appdiv>
<AppBar style={{zIndex: 1}} position='fixed' color='default'> <div className={classes.root}>
<Tabs <AppBar style={{zIndex: 1}} position='fixed' color='default'>
value={selectedTab} <Tabs
variant='fullWidth' centered
scrollButtons value={selectedTab}
indicatorColor='primary' variant='fullWidth'
textColor='primary' indicatorColor='primary'
aria-label='scrollable force tabs example' textColor='primary'
onChange={handleChange} aria-label='tabs menu'
allowScrollButtonsMobile> onChange={handleChange}
<Tab label='Kay-la' icon={<HomeIcon style={{fontSize: 30}} />} {...a11yProps(0)} /> >
<Tab label='Tèks' icon={<MenuBookIcon style={{fontSize: 30}} />} {...a11yProps(1)} /> <Tab label='Kay-la' icon={<HomeIcon style={{fontSize: 30}} />} {...a11yProps(0)} />
<Tab label='Awtis' icon={<RecordVoiceOverIcon style={{fontSize: 30}} />} {...a11yProps(2)} /> <Tab label='Tèks' icon={<MenuBookIcon style={{fontSize: 30}} />} {...a11yProps(1)} />
<Tab label='Soumèt' icon={<PlaylistAddIcon style={{fontSize: 30}} />} {...a11yProps(3)} /> <Tab label='Awtis' icon={<RecordVoiceOverIcon style={{fontSize: 30}} />} {...a11yProps(2)} />
</Tabs> <Tab label='Soumèt' icon={<PlaylistAddIcon style={{fontSize: 30}} />} {...a11yProps(3)} />
</AppBar> </Tabs>
<TabPanel value={value} index={0} /> </AppBar>
<TabPanel value={value} index={1} /> <TabPanel value={value} index={0} />
<TabPanel value={value} index={2} /> <TabPanel value={value} index={1} />
<TabPanel value={value} index={3} /> <TabPanel value={value} index={2} />
</div> <TabPanel value={value} index={3} />
); </div>
</Appdiv>
)
} }
Navigasyon.propTypes = { Navigasyon.propTypes = {