Merge pull request #33 from markolofsen/dev

fix main menu

src/@core/hooks/useMedia.ts

@@ -61,24 +61,15 @@ export const useMedia = () => {
 
 	const matches = ['xs', 'sm', 'md', 'lg', 'xl', 'xxl']
 
-	const chunks: MediaItem = {
-		xs: false,
-		sm: false,
-		md: false,
-		lg: false,
-		xl: false,
-		xxl: false,
-	}
-
-	const res: MediaDict = {
-		up: chunks,
-		down: chunks,
-		only: chunks,
+	const res: MediaDict | any = {
+		up: {},
+		down: {},
+		only: {},
 	}
 	for (const i of matches) {
-		res.up[i] = useMediaQuery((theme: any) => theme.breakpoints.up(i)) as boolean
-		res.down[i] = useMediaQuery((theme: any) => theme.breakpoints.down(i)) as boolean
-		res.only[i] = useMediaQuery((theme: any) => theme.breakpoints.only(i)) as boolean
+		res.up[i] = useMediaQuery((theme: any) => theme.breakpoints.up(i))
+		res.down[i] = useMediaQuery((theme: any) => theme.breakpoints.down(i))
+		res.only[i] = useMediaQuery((theme: any) => theme.breakpoints.only(i))
 	}
 
 	return res as MediaDict

src/views/Player/Controls/index.tsx

@@ -2,8 +2,12 @@ import * as React from 'react';
 
 // mui
 import { styled } from '@mui/system';
+import { Box, Collapse, Button } from '@mui/material';
 import ClickAwayListener from '@mui/base/ClickAwayListener';
 
+// icons
+import MenuIcon from '@mui/icons-material/Menu';
+
 // hooks
 import { useMedia } from 'src/@core/hooks/useMedia'
 
@@ -49,6 +53,12 @@ const RootDiv = styled('ul')(({ theme }: any) => ({
 
 }))
 
+const IconButtonMenu = styled(Button)(({ theme }: any) => ({
+  backgroundColor: 'rgba(0,0,0,.5)',
+  backdropFilter: 'blur(4px)',
+  borderRadius: theme.shape.borderRadius * 1.2,
+  border: `1px solid ${theme.palette.divider}`,
+}))
 
 export default function Controls() {
 
@@ -58,32 +68,48 @@ export default function Controls() {
   // states
   const [show, setShow] = React.useState(true)
 
+  React.useEffect(() => {
+    setShow(media.down.sm ? false : true)
+  }, [media.down.sm])
+
   return (
     <ClickAwayListener
-
       onClickAway={() => {
         if (media.down.sm) {
           setShow(false)
         }
       }}>
-
-      <RootDiv
-        onMouseEnter={() => {
-          setShow(true)
-        }}
-        onTouchStart={() => {
-          setShow(true)
-        }}
-        sx={{
-          opacity: show ? 1 : .5
-        }}>
-        <li data-li="menu">
-          <MainMenu />
-        </li>
-        <li data-li="gallery">
-          <Gallery />
-        </li>
-      </RootDiv>
+      <Box sx={{
+        padding: '1rem',
+        pointerEvents: 'none',
+        '& > *': {
+          pointerEvents: 'all',
+        }
+      }}>
+        {!show && (
+          <IconButtonMenu
+            size='large'
+            color="inherit"
+            startIcon={<MenuIcon />}
+            onClick={() => {
+              setShow(true)
+            }}>
+            Menu
+          </IconButtonMenu>
+        )}
+
+        <Collapse in={show}>
+          <RootDiv>
+            <li data-li="menu">
+              <MainMenu />
+            </li>
+            <li data-li="gallery">
+              <Gallery />
+            </li>
+          </RootDiv>
+
+        </Collapse>
+      </Box>
     </ClickAwayListener>
   )
 }