Ott 334 menu button animation (#105)

.eslintrc

@@ -87,6 +87,7 @@
     "no-unused-vars": "off",
     "react/jsx-one-expression-per-line": "off",
     "react/jsx-fragments": "off",
-    "semi": "off"
+    "semi": "off",
+    "@typescript-eslint/semi": ["error", "never"]
   }
 }

src/features/Burger/index.tsx

@@ -0,0 +1,26 @@
+import React from 'react'
+
+import {
+  RowOne,
+  RowTwo,
+  RowThree,
+  StyledBurger,
+} from './styled'
+
+type Props = {
+  isOpen: boolean,
+  toggle: () => void,
+}
+
+export const Burger = (
+  { isOpen, toggle }: Props,
+) => (
+  <StyledBurger
+    open={isOpen}
+    onClick={toggle}
+  >
+    <RowOne />
+    <RowTwo />
+    <RowThree />
+  </StyledBurger>
+)

src/features/Burger/styled.tsx

@@ -0,0 +1,53 @@
+import styled from 'styled-components'
+
+import { devices } from 'config/devices'
+
+const BurgerRow = styled.div`
+  width: 19px;
+  height: 2px;
+  border-radius: 10px;
+  transition: all 0.3s linear;
+  position: relative;
+  transform-origin: 1px;
+  background: #666666;
+
+  @media${devices.tablet} {
+    display: none;
+  }
+`
+
+export const RowOne = styled(BurgerRow)``
+
+export const RowTwo = styled(BurgerRow)``
+
+export const RowThree = styled(BurgerRow)``
+
+export const StyledBurger = styled.div<{open: boolean}>`
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  width: 22px;
+  height: 22px;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  padding: 2px;
+  z-index: 10;
+
+  ${RowOne}{
+    transform: ${({ open }) => (open ? 'rotate(45deg)' : 'rotate(0)')};
+  }
+
+  ${RowTwo}{
+    opacity: ${({ open }) => (open ? '0' : '1')};
+  }
+
+  ${RowThree}{
+    transform: ${({ open }) => (open ? 'rotate(-45deg)' : 'rotate(0)')};
+  }
+
+  @media${devices.tablet} {
+    background-size: 100%;
+    background-image: url(/images/userAccount.svg);
+  }
+`;

src/features/Menu/index.tsx

@@ -1,15 +1,16 @@
 import React from 'react'
 
 import { PAGES } from 'config'
+
 import { useToggle } from 'hooks'
 
 import { useAuthStore } from 'features/AuthStore'
 import { T9n } from 'features/T9n'
 import { OutsideClick } from 'features/OutsideClick'
+import { Burger } from 'features/Burger'
 
 import {
   Wrapper,
-  ToggleButton,
   MenuList,
   MenuItem,
   Icon,
@@ -21,17 +22,16 @@ export const Menu = () => {
   const {
     close,
     isOpen,
-    open,
+    toggle,
   } = useToggle()
   const { logout } = useAuthStore()
 
   return (
     <OutsideClick onClick={close}>
       <Wrapper>
-        <ToggleButton
+        <Burger
-          onClick={open}
+          toggle={toggle}
-          aria-expanded={isOpen}
+          isOpen={isOpen}
-          aria-controls='menuList'
         />
         {isOpen && (
           <MenuList id='menuList'>

src/features/Menu/styled.tsx

@@ -19,21 +19,7 @@ export const Wrapper = styled.nav`
     margin-right: 10px;
   }
 `
-export const ToggleButton = styled.button`
-  width: 18px;
-  height: 16px;
-  background-image: url(/images/menuIcon.svg);
-  background-size: 100%;
-  background-repeat: no-repeat;
-  background-color: transparent;
-  border: none;
-  outline: none;
-  cursor: pointer;
 
-  @media${devices.tablet} {
-    background-image: url(/images/userAccount.svg);
-  }
-`
 export const MenuList = styled.ul`
   position: absolute;
   top: 50px;
@@ -50,7 +36,6 @@ export const MenuList = styled.ul`
     width: 288px;
   }
 
-
   @media${devices.tablet} {
     right: 0;
     left: auto;
@@ -76,6 +61,7 @@ export const MenuList = styled.ul`
     }
   }
 `
+
 export const MenuItem = styled.li`
   position: relative;
   display: flex;