Fix DrawerBar position

components/teks/drawer-bar.js

@@ -2,6 +2,7 @@ import {useState} from 'react'
 import {styled} from '@mui/material/styles'
 import PropTypes from 'prop-types'
 import {union, deburr} from 'lodash'
+import useMediaQuery from '@mui/material/useMediaQuery'
 
 import {
   Divider,
@@ -31,7 +32,7 @@ const Root = styled('div')((
   [`& .${classes.toolbar}`]: theme.mixins.toolbar,
 
   [`& .${classes.list}`]: {
-    marginBottom: '6em'
+    marginBottom: '3em'
   },
 
   [`& .${classes.form}`]: {
@@ -60,6 +61,7 @@ const getMizikFiltered = (paroles, filter) => {
 }
 
 export default function DrawerBar({meteEsMobilOuve, paroles, slug}) {
+  const isMobile = useMediaQuery('(max-width:600px)')
   const [search, setSearch] = useState('')
   const [slugTeksChwazi, meteSlugTeksChwazi] = useState(slug)
 
@@ -73,7 +75,7 @@ export default function DrawerBar({meteEsMobilOuve, paroles, slug}) {
 
   return (
     <Root className='search'>
-      <FormControl className={classes.form}>
+      <FormControl style={{marginTop: `${isMobile ? '3em' : 0}`}} className={classes.form}>
         <InputBase
           className={classes.toolbar}
           placeholder='Recherche...'
@@ -87,7 +89,7 @@ export default function DrawerBar({meteEsMobilOuve, paroles, slug}) {
         />
       </FormControl>
       <Divider />
-      <div className={classes.list}>
+      <div style={{marginBottom: `${isMobile ? 0 : '3em'}`}} className={classes.list}>
         <MizikLis
           niAwtis
           meteEsMobilOuve={meteEsMobilOuve}