Make '/teks' dymamic & add Drawer components

components/awtis/mizik-badj-meni.js

@@ -1,4 +1,5 @@
-import React, {useRef, useEffect, useState} from 'react'
+import {useRef, useEffect, useState} from 'react'
+import {useRouter} from 'next/router'
 import PropTypes from 'prop-types'
 
 import {
@@ -28,6 +29,7 @@ export default function MizikBadjMeni({miziks}) {
   const classes = useStyles()
   const [open, setOpen] = useState(false)
   const anchorRef = useRef(null)
+  const router = useRouter()
 
   const handleToggle = () => {
     setOpen(previousOpen_ => !previousOpen_)
@@ -41,6 +43,10 @@ export default function MizikBadjMeni({miziks}) {
     setOpen(false)
   }
 
+  const handleClick = slug => {
+    router.push(`/teks/${slug}#${slug}`)
+  }
+
   function handleListKeyDown(event) {
     if (event.key === 'Tab') {
       event.preventDefault()
@@ -85,7 +91,7 @@ export default function MizikBadjMeni({miziks}) {
             <Paper>
               <ClickAwayListener onClickAway={handleClose}>
                 <MenuList autoFocusItem={open} id='menu-list-grow' onKeyDown={handleListKeyDown}>
-                  {miziks.map(m => <MenuItem key={m._id} onClick={handleClose}>{m.titre}</MenuItem>)}
+                  {miziks.map(m => <MenuItem key={m._id} onClick={() => handleClick(m.slug)}>{m.titre}</MenuItem>)}
                 </MenuList>
               </ClickAwayListener>
             </Paper>

components/awtis/mizik-lis.js

@@ -1,10 +1,8 @@
-import React from 'react'
 import PropTypes from 'prop-types'
+import {useRouter} from 'next/router'
 
 import {makeStyles} from '@material-ui/core/styles'
-import List from '@material-ui/core/List'
-import ListItem from '@material-ui/core/ListItem'
-import ListItemText from '@material-ui/core/ListItemText'
+import {List, ListItem, ListItemText} from '@material-ui/core'
 
 const useStyles = makeStyles(theme => ({
   root: {
@@ -14,14 +12,39 @@ const useStyles = makeStyles(theme => ({
   }
 }))
 
-export default function MizikLis({miziks}) {
+export default function MizikLis({setMobileOpen, hasAwtis, miziks, selectedMizikSlug, setSelectedMizikSlug}) {
   const classes = useStyles()
+  const router = useRouter()
+
+  const handleClick = slug => {
+    if (setSelectedMizikSlug) {
+      setSelectedMizikSlug(slug)
+    }
+
+    if (slug !== selectedMizikSlug) {
+      if (hasAwtis) {
+        router.push(`/teks/${slug}`)
+      } else {
+        router.push(`/teks/${slug}#${slug}`)
+      }
+    }
+
+    if (setMobileOpen) {
+      setMobileOpen(false)
+    }
+  }
 
   return (
     <List component='nav' className={classes.root} aria-label='mizik'>
-      {miziks.map(m => (
-        <ListItem key={m._id} button>
-          <ListItemText primary={m.titre} />
+      {miziks.map(({slug, titre, awtis}) => (
+        <ListItem
+          key={slug}
+          button
+          id={slug}
+          selected={selectedMizikSlug === slug}
+          onClick={() => handleClick(slug)}
+        >
+          <ListItemText primary={titre} secondary={hasAwtis ? awtis.map(a => a.alias).join() : null} />
         </ListItem>
       ))}
     </List>
@@ -29,5 +52,16 @@ export default function MizikLis({miziks}) {
 }
 
 MizikLis.propTypes = {
-  miziks: PropTypes.array.isRequired
+  setMobileOpen: PropTypes.func,
+  hasAwtis: PropTypes.bool,
+  miziks: PropTypes.array.isRequired,
+  selectedMizikSlug: PropTypes.string,
+  setSelectedMizikSlug: PropTypes.func
+}
+
+MizikLis.defaultProps = {
+  setMobileOpen: null,
+  hasAwtis: false,
+  selectedMizikSlug: null,
+  setSelectedMizikSlug: null
 }