Toggle menu panel with menu and close button

Author: mhaidarhanif

public/icons/close-icon.svg

@@ -11,6 +11,7 @@ const Overlay = styled.div`
   left: 0;
   top: 0;
   background-color: rgba(0, 0, 0, 0.5);
+  display: ${({ isMenuPanelVisible }) => !isMenuPanelVisible && "none"};
 `;
 
 const MenuPanelStyled = styled.div`
@@ -21,7 +22,15 @@ const MenuPanelStyled = styled.div`
   top: 0;
   right: 0;
   height: 100vh;
-  padding-top: 30px;
+  padding-top: 50px;
+  padding-right: 50px;
+  display: ${({ isMenuPanelVisible }) => !isMenuPanelVisible && "none"};
+`;
+
+const CloseButton = styled.span`
+  cursor: pointer;
+  display: flex;
+  justify-content: flex-end;
 `;
 
 const Links = styled.ul`
@@ -46,12 +55,27 @@ const Links = styled.ul`
   }
 `;
 
-const MenuPanel = ({ isAuthenticated, handleLogout }) => {
+const MenuPanel = ({
+  isMenuPanelVisible,
+  toggleMenuPanelVisible,
+  isAuthenticated,
+  handleLogout,
+}) => {
   return (
     <>
-      <Overlay></Overlay>
+      <Overlay isMenuPanelVisible={isMenuPanelVisible}></Overlay>
 
-      <MenuPanelStyled>
+      <MenuPanelStyled isMenuPanelVisible={isMenuPanelVisible}>
+        <CloseButton
+          onClick={() => toggleMenuPanelVisible(!isMenuPanelVisible)}
+        >
+          <img
+            src="/icons/close-icon.svg"
+            alt="Close Icon"
+            width={50}
+            height={50}
+          />
+        </CloseButton>
         <Links>
           <li>
             <Link to="/artists">Artists</Link>
@@ -77,6 +101,8 @@ const MenuPanel = ({ isAuthenticated, handleLogout }) => {
 };
 
 MenuPanel.propTypes = {
+  isMenuPanelVisible: PropTypes.bool,
+  toggleMenuPanelVisible: PropTypes.func,
   isAuthenticated: PropTypes.bool,
   handleLogout: PropTypes.func,
 };

src/components/MenuPanel.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import styled from "styled-components";
 import { Link } from "react-router-dom";
 import { connect } from "react-redux";
@@ -45,6 +45,8 @@ const MenuButton = styled.span`
 `;
 
 const Navigation = ({ isAuthenticated, handleLogout }) => {
+  const [isMenuPanelVisible, toggleMenuPanelVisible] = useState(true);
+
   return (
     <>
       <NavigationStyled>
@@ -70,7 +72,7 @@ const Navigation = ({ isAuthenticated, handleLogout }) => {
             </li>
           )}
         </Links>
-        <MenuButton>
+        <MenuButton onClick={() => toggleMenuPanelVisible(!isMenuPanelVisible)}>
           <img
             src="/icons/menu-icon.svg"
             alt="Menu Icon"
@@ -81,6 +83,8 @@ const Navigation = ({ isAuthenticated, handleLogout }) => {
       </NavigationStyled>
 
       <MenuPanel
+        isMenuPanelVisible={isMenuPanelVisible}
+        toggleMenuPanelVisible={toggleMenuPanelVisible}
         isAuthenticated={isAuthenticated}
         handleLogout={handleLogout}
       ></MenuPanel>