Makes TeksDrawer permanent

components/teks/drawer-bar.js

@@ -1,49 +1,20 @@
+'use client'
+
 import {useState} from 'react'
-import {styled} from '@mui/material/styles'
+import Box from '@mui/material/Box'
 import PropTypes from 'prop-types'
 import {union, deburr} from 'lodash'
 import useMediaQuery from '@mui/material/useMediaQuery'
 
-import {
-  Divider,
-  FormControl,
-  InputAdornment,
-  InputBase
-} from '@mui/material'
+import Divider from '@mui/material/Divider'
+import FormControl from '@mui/material/FormControl'
+import InputAdornment from '@mui/material/InputAdornment'
+import InputBase from '@mui/material/InputBase'
 
 import SearchIcon from '@mui/icons-material/Search'
 
 import MizikLis from '../awtis/mizik-lis'
 
-const PREFIX = 'drawer-bar'
-
-const classes = {
-  toolbar: `${PREFIX}-toolbar`,
-  list: `${PREFIX}-list`,
-  form: `${PREFIX}-form`,
-  text: `${PREFIX}-text`
-}
-
-const Root = styled('div')((
-  {
-    theme
-  }
-) => ({
-  [`& .${classes.toolbar}`]: theme.mixins.toolbar,
-
-  [`& .${classes.list}`]: {
-    marginBottom: '3em'
-  },
-
-  [`& .${classes.form}`]: {
-    marginLeft: theme.spacing(1)
-  },
-
-  [`& .${classes.text}`]: {
-    marginBottom: '0.5em'
-  }
-}))
-
 const getMizikFiltered = (paroles, filter) => {
   if (paroles) {
     const filteredTitre = paroles.filter(({attributes}) => {
@@ -60,10 +31,9 @@ const getMizikFiltered = (paroles, filter) => {
   }
 }
 
-export default function DrawerBar({meteEsMobilOuve, paroles, slug}) {
+export default function DrawerBar({paroles}) {
   const isMobile = useMediaQuery('(max-width:600px)')
   const [search, setSearch] = useState('')
-  const [slugTeksChwazi, meteSlugTeksChwazi] = useState(slug)
 
   const mizikFiltered = getMizikFiltered(paroles, search)
 
@@ -74,10 +44,10 @@ export default function DrawerBar({meteEsMobilOuve, paroles, slug}) {
   }
 
   return (
-    <Root className='search'>
-      <FormControl style={{marginTop: `${isMobile ? '3em' : 0}`}} className={classes.form}>
+    <Box sx={{height: '100%'}}>
+      <FormControl>
         <InputBase
-          className={classes.toolbar}
+          sx={{paddingBlock: 2}}
           placeholder='Recherche...'
           startAdornment={
             <InputAdornment position='start'>
@@ -89,26 +59,16 @@ export default function DrawerBar({meteEsMobilOuve, paroles, slug}) {
         />
       </FormControl>
       <Divider />
-      <div style={{marginBottom: `${isMobile ? 0 : '3em'}`}} className={classes.list}>
+      <Box style={{marginBottom: `${isMobile ? 0 : '3em'}`, height: `calc(100% - ${isMobile ? '65px' : '115px'})`}}>
         <MizikLis
           niAwtis
-          meteEsMobilOuve={meteEsMobilOuve}
           paroles={mizikFiltered}
-          slugTeksChwazi={slugTeksChwazi}
-          meteSlugTeksChwazi={meteSlugTeksChwazi}
         />
-      </div>
-    </Root>
+      </Box>
+    </Box>
   )
 }
 
 DrawerBar.propTypes = {
-  meteEsMobilOuve: PropTypes.func,
-  paroles: PropTypes.array.isRequired,
-  slug: PropTypes.string
-}
-
-DrawerBar.defaultProps = {
-  meteEsMobilOuve: null,
-  slug: null
+  paroles: PropTypes.array.isRequired
 }