Fix AppBar display

components/navigasyon.js

@@ -19,13 +19,12 @@ const classes = {
   root: `${PREFIX}-root`
 }
 
-const Root = styled('div')((
+const Appdiv = styled('div')((
   {
     theme
   }
 ) => ({
   [`& .${classes.root}`]: {
-    marginBottom: 50,
     flexGrow: 1,
     width: '100%',
     backgroundColor: theme.palette.background.paper
@@ -50,7 +49,7 @@ function TabPanel(props) {
   const {children, value, index, ...other} = props
 
   return (
-    <Root
+    <div
       role='tabpanel'
       hidden={value !== index}
       id={`scrollable-force-tabpanel-${index}`}
@@ -62,7 +61,7 @@ function TabPanel(props) {
           <Typography component='div'>{children}</Typography>
         </Box>
       )}
-    </Root>
+    </div>
   )
 }
 
@@ -93,29 +92,31 @@ export default function Navigasyon({selectedTab}) {
   }
 
   return (
-    <div className={classes.root}>
-      <AppBar style={{zIndex: 1}} position='fixed' color='default'>
-        <Tabs
-          value={selectedTab}
-          variant='fullWidth'
-          scrollButtons
-          indicatorColor='primary'
-          textColor='primary'
-          aria-label='scrollable force tabs example'
-          onChange={handleChange}
-          allowScrollButtonsMobile>
-          <Tab label='Kay-la' icon={<HomeIcon style={{fontSize: 30}} />} {...a11yProps(0)} />
-          <Tab label='Tèks' icon={<MenuBookIcon style={{fontSize: 30}} />} {...a11yProps(1)} />
-          <Tab label='Awtis' icon={<RecordVoiceOverIcon 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>
-  );
+    <Appdiv>
+      <div className={classes.root}>
+        <AppBar style={{zIndex: 1}} position='fixed' color='default'>
+          <Tabs
+            centered
+            value={selectedTab}
+            variant='fullWidth'
+            indicatorColor='primary'
+            textColor='primary'
+            aria-label='tabs menu'
+            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='Awtis' icon={<RecordVoiceOverIcon 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>
+    </Appdiv>
+  )
 }
 
 Navigasyon.propTypes = {