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,17 +92,18 @@ export default function Navigasyon({selectedTab}) {
   }
 
   return (
+    <Appdiv>
       <div className={classes.root}>
         <AppBar style={{zIndex: 1}} position='fixed' color='default'>
           <Tabs
+            centered
             value={selectedTab}
             variant='fullWidth'
-          scrollButtons
             indicatorColor='primary'
             textColor='primary'
-          aria-label='scrollable force tabs example'
+            aria-label='tabs menu'
             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)} />
@@ -115,7 +115,8 @@ export default function Navigasyon({selectedTab}) {
         <TabPanel value={value} index={2} />
         <TabPanel value={value} index={3} />
       </div>
-  );
+    </Appdiv>
+  )
 }
 
 Navigasyon.propTypes = {