Remove app box shadow and fix tabs display

components/navigasyon.js

@@ -4,10 +4,11 @@ import {useRouter} from 'next/router'
 
 import {styled} from '@mui/material/styles'
 import AppBar from '@mui/material/AppBar'
-import Tabs from '@mui/material/Tabs'
+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'
 
 const PREFIX = 'navigasyon'
 
@@ -76,7 +77,7 @@ function a11yProps(index) {
 
 export default function Navigasyon({selectedTab}) {
   const router = useRouter()
-
+  const isMobile = useMediaQuery('(max-width:422px)')
   const [value, setValue] = useState(0)
 
   const handleChange = (event, newValue) => {
@@ -90,14 +91,21 @@ export default function Navigasyon({selectedTab}) {
   return (
     <Appdiv>
       <div className={classes.root}>
-        <AppBar style={{zIndex: 1}} position='fixed' color='default'>
+        <AppBar style={{zIndex: 1, boxShadow: 'none'}} position='fixed' color='default'>
           <Tabs
-            centered
+            allowScrollButtonsMobile
+            centered={Boolean(!isMobile)}
             value={selectedTab}
-            variant='fullWidth'
             indicatorColor='primary'
             textColor='primary'
             aria-label='tabs menu'
+            variant={isMobile ? 'scrollable' : 'fullWidth'}
+            scrollButtons='auto'
+            sx={{
+              [`& .${tabsClasses.scrollButtons}`]: {
+                '&.Mui-disabled': {opacity: 0.3},
+              },
+            }}
             onChange={handleChange}
           >
             <Tab label='Accueil' {...a11yProps(0)} />