Burger menu (#141)

* Burger menu implementation * Create custom burger icon with closing animation * Remove unused menu icons * Fix bug + onclick type * Remove void from function * Add () => to onClick for mutateLogout()
lexicongovernance · Feb 7, 2024 · b681297 · b681297
1 parent fcf7696
commit b681297
Show file tree

Hide file tree

Showing 4 changed files with 92 additions and 30 deletions.
diff --git a/packages/berlin/public/icons/menu-dark.svg b/packages/berlin/public/icons/menu-dark.svg
diff --git a/packages/berlin/public/icons/menu-light.svg b/packages/berlin/public/icons/menu-light.svg
diff --git a/packages/berlin/src/components/header/Header.styled.tsx b/packages/berlin/src/components/header/Header.styled.tsx
@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled, { keyframes } from 'styled-components';
 import Button from '../button/Button';
 
 export const SyledHeader = styled.header`
@@ -78,25 +78,83 @@ export const NavButtons = styled.ul`
   list-style: none;
 `;
 
-export const DesktopButtons = styled.ul`
+export const DesktopButtons = styled.div`
   display: none;
   @media (min-width: 1080px) {
     display: flex;
     gap: 1rem;
-    list-style: none;
+  }
+`;
+
+export const MobileButtons = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  height: 100%;
+  @media (min-width: 1080px) {
+    display: none;
   }
 `;
 
 export const ThemeButton = styled(Button)``;
 
-export const MenuButton = styled.button`
-  display: block;
-  background-color: var(--color-white);
-  border: none;
+export const MenuButton = styled.div`
+  align-items: center;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
   height: 2.25rem;
+  justify-content: center;
   width: 2.25rem;
 
   @media (min-width: 1080px) {
     display: none;
   }
 `;
+
+export const Bar = styled.div<{ isOpen: boolean }>`
+  background-color: var(--color-black);
+  border-radius: 8px;
+  height: 3px;
+  margin: 2px 0;
+  transition: 0.4s;
+  width: 27px;
+
+  &:first-child {
+    transform: ${({ isOpen }) => (isOpen ? 'rotate(-45deg) translateY(10px)' : '')};
+  }
+
+  &:nth-child(2) {
+    opacity: ${({ isOpen }) => (isOpen ? '0' : '1')};
+    transition: 0.2s;
+  }
+
+  &:nth-child(3) {
+    transform: ${({ isOpen }) => (isOpen ? 'rotate(45deg) translateY(-10px)' : '')};
+  }
+`;
+
+const fadeIn = keyframes`
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+`;
+
+export const BurgerMenuContainer = styled.nav<{ $isOpen: boolean }>`
+  align-items: center;
+  background-color: var(--color-white);
+  bottom: 0;
+  display: flex;
+  height: calc(100% - 160px);
+  justify-content: center;
+  left: 0;
+  position: fixed;
+  width: 100%;
+  z-index: 999;
+
+  display: ${(props) => (props.$isOpen ? 'flex' : 'none')};
+  animation: ${fadeIn} 0.3s ease-out;
+`;
diff --git a/packages/berlin/src/components/header/Header.tsx b/packages/berlin/src/components/header/Header.tsx
@@ -1,4 +1,5 @@
 // React and third-party libraries
+import { useState } from 'react';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { useNavigate } from 'react-router-dom';
 
@@ -18,13 +19,16 @@ import ZupassLoginButton from '../zupassButton/ZupassLoginButton';
 
 // Styled components
 import {
+  Bar,
+  BurgerMenuContainer,
   DesktopButtons,
   HeaderContainer,
   LogoContainer,
   LogoImage,
   LogoSubtext,
   LogoText,
   MenuButton,
+  MobileButtons,
   NavButtons,
   NavContainer,
   SyledHeader,
@@ -47,6 +51,8 @@ function Header() {
     },
   });
 
+  const [isBurgerMenuOpen, setIsBurgerMenuOpen] = useState(false);
+
   return (
     <SyledHeader>
       <HeaderContainer>
@@ -68,20 +74,38 @@ function Header() {
                   <NavButton to="/account" $color="secondary">
                     Account
                   </NavButton>
-                  <Button onClick={mutateLogout}>Log out</Button>
+                  <Button onClick={() => mutateLogout()}>Log out</Button>
                 </>
               ) : (
                 <ZupassLoginButton>Login with Zupass</ZupassLoginButton>
               )}
             </DesktopButtons>
-            <MenuButton>
-              <img src={`/icons/menu-${theme}.svg`} />
+            <MenuButton onClick={() => setIsBurgerMenuOpen(!isBurgerMenuOpen)}>
+              <Bar isOpen={isBurgerMenuOpen} />
+              <Bar isOpen={isBurgerMenuOpen} />
+              <Bar isOpen={isBurgerMenuOpen} />
             </MenuButton>
             <ThemeButton onClick={toggleTheme}>
               <img src={`/icons/toggle-${theme}.svg`} height={20} width={20} />
             </ThemeButton>
           </NavButtons>
         </NavContainer>
+        <BurgerMenuContainer $isOpen={isBurgerMenuOpen} onClick={() => setIsBurgerMenuOpen(false)}>
+          <NavButtons>
+            <MobileButtons>
+              {user ? (
+                <>
+                  <NavButton to="/account" $color="secondary">
+                    Account
+                  </NavButton>
+                  <Button onClick={() => mutateLogout()}>Log out</Button>
+                </>
+              ) : (
+                <ZupassLoginButton>Login with Zupass</ZupassLoginButton>
+              )}
+            </MobileButtons>
+          </NavButtons>
+        </BurgerMenuContainer>
       </HeaderContainer>
     </SyledHeader>
   );