Feat(JSX) Added mobile menu

src/components/MobileMenu/MobileMenu.jsx

@@ -1,22 +1,73 @@
+import { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { UserMenu, LogoutLink } from '../UserMenu/UserMenu';
-import { MenuWrapper } from './MobileMenu.styled';
+import { MenuWrapper, Overlay, CloseButton } from './MobileMenu.styled';
+
+export const MobileMenu = ({ isOpen, handleClick }) => {
+  const [menuIsOpen, setMenuIsOpen] = useState(isOpen);
+
+  const openMenu = () => {
+    setMenuIsOpen(true);
+  };
+
+  const closeMenu = () => {
+    setMenuIsOpen(false);
+  };
+
+  const handleEscKey = event => {
+    if (event.key === 'Escape') {
+      closeMenu();
+    }
+  };
+
+  useEffect(() => {
+    if (menuIsOpen) {
+      window.addEventListener('keydown', handleEscKey);
+    }
+
+    return () => {
+      window.removeEventListener('keydown', handleEscKey);
+    };
+  }, [menuIsOpen]);
+
+  const handleBackdropClick = event => {
+    if (event.target === event.currentTarget) {
+      closeMenu();
+    }
+  };
+
+  useEffect(() => {
+    setMenuIsOpen(isOpen);
+  }, [isOpen]);
 
-export const MobileMenu = ({ isShown, handleClick }) => {
   return (
-    <MenuWrapper className={isShown ? 'shown' : 'hidden'}>
-      <UserMenu handleClick={handleClick}></UserMenu>
-      <LogoutLink to="/">
-        <span>Logout</span>
-        <svg width="20" height="20">
-          <use href="../../../src/images/sprite.svg#icon-log-out"></use>
-        </svg>
-      </LogoutLink>
-    </MenuWrapper>
+    <>
+      {menuIsOpen && <Overlay onClick={closeMenu}></Overlay>}
+      <MenuWrapper
+        className={menuIsOpen ? 'shown' : 'hidden'}
+        onClick={handleBackdropClick}
+      >
+        <CloseButton onClick={closeMenu}>
+          <svg width="20" height="20">
+            <use href="../../../src/images/sprite.svg#icon-x"></use>
+          </svg>
+        </CloseButton>
+
+        <UserMenu handleClick={handleClick}></UserMenu>
+        <LogoutLink to="/">
+          <span>Logout</span>
+          <svg width="20" height="20">
+            <use href="../../../src/images/sprite.svg#icon-log-out"></use>
+          </svg>
+        </LogoutLink>
+      </MenuWrapper>
+    </>
   );
 };
 
 MobileMenu.propTypes = {
-  isShown: PropTypes.bool.isRequired,
+  isOpen: PropTypes.bool.isRequired,
   handleClick: PropTypes.func.isRequired,
 };
+
+export default MobileMenu;

src/components/MobileMenu/MobileMenu.styled.jsx

@@ -1,5 +1,19 @@
 import styled from 'styled-components';
 
+export const Overlay = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgb(255 255 255 / 0.5);
+  backdrop-filter: blur(1px);
+  display: flex;
+  justify-content: start;
+  align-items: center;
+  z-index: 1200;
+`;
+
 export const MenuWrapper = styled.div`
   background-color: var(--orange-color);
   display: flex;
@@ -15,20 +29,36 @@ export const MenuWrapper = styled.div`
 
   @media screen and (max-width: 1439px) {
     position: absolute;
-    z-index: 999;
 
     &.shown {
       transform: translateX(0%);
       opacity: 1;
+      pointer-events: auto;
     }
 
     &.hidden {
       transform: translateX(-100%);
       opacity: 0;
+      pointer-events: none;
     }
 
     transition:
-      transform 750ms cubic-bezier(0.4, 0, 0.2, 1),
-      opacity 750ms cubic-bezier(0.4, 0, 0.2, 1);
+      transform 250ms cubic-bezier(0.4, 0, 0.2, 1),
+      opacity 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  }
+`;
+
+export const CloseButton = styled.button`
+  position: absolute;
+  top: 30px;
+  right: 30px;
+  background: none;
+  border: none;
+  cursor: pointer;
+
+  svg {
+    width: 20px;
+    height: 20px;
+    fill: #fff;
   }
 `;