Close TeksDraw on click on an item

components/awtis/mizik-lis.js

@@ -22,7 +22,7 @@ function grupPawol(pawol) {
   return {pawol: pawolTrie, grupCounts, grup}
 }
 
-export default function MizikLis({niAwtis, paroles}) {
+export default function MizikLis({niAwtis, paroles, meteEsMobilOuve}) {
   const params = useParams()
   const {pawol, grupCounts, grup} = grupPawol(paroles)
 
@@ -37,7 +37,7 @@ export default function MizikLis({niAwtis, paroles}) {
         const kuvetiFormat = formatKuveti(couverture)
 
         return (
-          <MizikLyen niAwtis={niAwtis} anPawol={anPawol} kuveti={kuvetiFormat} slug={params.slug} />
+          <MizikLyen niAwtis={niAwtis} anPawol={anPawol} kuveti={kuvetiFormat} slug={params.slug} meteEsMobilOuve={meteEsMobilOuve} />
         )
       }}
     />
@@ -76,7 +76,8 @@ const MUIComponents = {
 
 MizikLis.propTypes = {
   niAwtis: PropTypes.bool,
-  paroles: PropTypes.array.isRequired
+  paroles: PropTypes.array.isRequired,
+  meteEsMobilOuve: PropTypes.func.isRequired
 }
 
 MUIComponents.List.propTypes = {

components/awtis/mizik-lyen.js

@@ -14,12 +14,13 @@ import {getAlias} from '../../lib/utils/format'
 
 const apiUrl = process.env.NEXT_PUBLIC_API_URL_ROOT || 'http://localhost:1337'
 
-export default function MizikLyen({niAwtis, anPawol, kuveti, slug}) {
+export default function MizikLyen({niAwtis, anPawol, kuveti, slug, meteEsMobilOuve}) {
   return (
     <Link
       passHref
       href={`/paroles/${anPawol.attributes.slug}#${anPawol.attributes.slug}`}
       style={{textDecoration: 'none', width: '100%', display: 'flex', alignItems: 'center'}}
+      onClick={() => meteEsMobilOuve(false)}
     >
       <ListItemButton
         sx={{padding: 0}}
@@ -52,5 +53,6 @@ MizikLyen.propTypes = {
   niAwtis: PropTypes.bool,
   anPawol: PropTypes.object,
   kuveti: PropTypes.object,
-  slug: PropTypes.string
+  slug: PropTypes.string,
+  meteEsMobilOuve: PropTypes.func.isRequired
 }

components/teks/drawer-bar.js

@@ -31,7 +31,7 @@ const getMizikFiltered = (paroles, filter) => {
   }
 }
 
-export default function DrawerBar({paroles}) {
+export default function DrawerBar({paroles, meteEsMobilOuve}) {
   const isMobile = useMediaQuery('(max-width:600px)')
   const [search, setSearch] = useState('')
 
@@ -63,6 +63,7 @@ export default function DrawerBar({paroles}) {
         <MizikLis
           niAwtis
           paroles={mizikFiltered}
+          meteEsMobilOuve={meteEsMobilOuve}
         />
       </Box>
     </Box>
@@ -70,5 +71,6 @@ export default function DrawerBar({paroles}) {
 }
 
 DrawerBar.propTypes = {
-  paroles: PropTypes.array.isRequired
+  paroles: PropTypes.array.isRequired,
+  meteEsMobilOuve: PropTypes.func.isRequired
 }