From 0e012a9ef2487ecbfc261ee24553c29ce3951bb6 Mon Sep 17 00:00:00 2001
From: jinhojang6 <jinho5051@gmail.com>
Date: Wed, 16 Oct 2024 01:48:42 +0900
Subject: [PATCH] feat: add hamburger menu

---
 public/assets/close.svg                       |  3 ++
 public/assets/hamburger.svg                   |  4 ++
 .../HamburgerMenu/HamburgerMenu.tsx           | 54 +++++++++++++++++++
 src/components/HamburgerMenu/index.ts         |  1 +
 src/components/Header/Header/Header.tsx       | 18 ++++++-
 src/components/Header/Navbar/Navbar.tsx       | 22 +++++---
 6 files changed, 95 insertions(+), 7 deletions(-)
 create mode 100644 public/assets/close.svg
 create mode 100644 public/assets/hamburger.svg
 create mode 100644 src/components/HamburgerMenu/HamburgerMenu.tsx
 create mode 100644 src/components/HamburgerMenu/index.ts

diff --git a/public/assets/close.svg b/public/assets/close.svg
new file mode 100644
index 0000000..acd5d30
--- /dev/null
+++ b/public/assets/close.svg
@@ -0,0 +1,3 @@
+<svg width="14" height="15" viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.0833 4.23913L10.2608 3.41663L6.99999 6.67746L3.73916 3.41663L2.91666 4.23913L6.17749 7.49996L2.91666 10.7608L3.73916 11.5833L6.99999 8.32246L10.2608 11.5833L11.0833 10.7608L7.82249 7.49996L11.0833 4.23913Z" fill="white"/>
+</svg>
diff --git a/public/assets/hamburger.svg b/public/assets/hamburger.svg
new file mode 100644
index 0000000..0ccd93c
--- /dev/null
+++ b/public/assets/hamburger.svg
@@ -0,0 +1,4 @@
+<svg width="28" height="29" viewBox="0 0 28 29" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.5" y="1" width="27" height="27" stroke="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.75 12.1667V11H19.25V12.1667H8.75ZM8.75 15.0833H19.25V13.9167H8.75V15.0833ZM8.75 18H19.25V16.8333H8.75V18Z" fill="white"/>
+</svg>
diff --git a/src/components/HamburgerMenu/HamburgerMenu.tsx b/src/components/HamburgerMenu/HamburgerMenu.tsx
new file mode 100644
index 0000000..77d3c51
--- /dev/null
+++ b/src/components/HamburgerMenu/HamburgerMenu.tsx
@@ -0,0 +1,54 @@
+import { breakpoints } from '@/configs/ui.configs'
+import styled from '@emotion/styled'
+import { useState } from 'react'
+import Navbar from '../Header/Navbar/Navbar'
+
+const Button = styled.button`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border: 1px solid rgb(var(--lsd-border-primary));
+  background: transparent;
+  cursor: pointer;
+`
+
+const HamburguerMenuContainer = styled.div`
+  @media (min-width: ${breakpoints.sm}px) {
+    display: none;
+  }
+
+  position: absolute;
+  z-index: 1000;
+  top: 58px;
+  left: 0;
+  padding: 16px;
+  width: 100%;
+  border: 1px solid rgb(var(--lsd-border-primary));
+  background: black;
+
+  gap: 24px;
+`
+
+const HamburguerMenu = () => {
+  const [isOpen, setIsOpen] = useState(false)
+
+  return (
+    <>
+      <Button onClick={() => setIsOpen(!isOpen)}>
+        <img
+          src={isOpen ? '/assets/close.svg' : '/assets/hamburger.svg'}
+          alt="Hamburguer Menu"
+        />
+      </Button>
+      {isOpen && (
+        <HamburguerMenuContainer>
+          <Navbar />
+        </HamburguerMenuContainer>
+      )}
+    </>
+  )
+}
+
+export default HamburguerMenu
diff --git a/src/components/HamburgerMenu/index.ts b/src/components/HamburgerMenu/index.ts
new file mode 100644
index 0000000..acf2fa0
--- /dev/null
+++ b/src/components/HamburgerMenu/index.ts
@@ -0,0 +1 @@
+export { default as HamburgerMenu } from './HamburgerMenu'
diff --git a/src/components/Header/Header/Header.tsx b/src/components/Header/Header/Header.tsx
index 5f23b62..bb60793 100644
--- a/src/components/Header/Header/Header.tsx
+++ b/src/components/Header/Header/Header.tsx
@@ -1,3 +1,5 @@
+import HamburguerMenu from '@/components/HamburgerMenu/HamburgerMenu'
+import { breakpoints } from '@/configs/ui.configs'
 import styled from '@emotion/styled'
 import Link from 'next/link'
 import React from 'react'
@@ -11,7 +13,9 @@ const Header: React.FC<NavbarProps> = () => {
       <Link href="/">
         <Logo src="/assets/logo.svg" alt="Logo" />
       </Link>
-      <Navbar />
+      <DesktopNavbar>
+        <Navbar />
+      </DesktopNavbar>
       <UserActions>
         <Link
           href="https://discord.com/invite/logosnetwork"
@@ -23,6 +27,7 @@ const Header: React.FC<NavbarProps> = () => {
             <Icon src="/icons/discord-white.svg" alt="Discord" />
           </SocialButton>
         </Link>
+        <HamburguerMenu />
         {/* <WalletButton>
           <WalletAddress>bc1qa...vehs9</WalletAddress>
           <Icon src="/assets/btc.svg" alt="Wallet icon" />
@@ -60,6 +65,7 @@ const Logo = styled.img`
 const UserActions = styled.div`
   display: flex;
   align-items: center;
+  gap: 8px;
 
   a {
     text-decoration: none;
@@ -91,6 +97,16 @@ const SocialButton = styled(Button)`
   }
 `
 
+const DesktopNavbar = styled.div`
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+
+  @media (max-width: ${breakpoints.sm}px) {
+    display: none;
+  }
+`
+
 // const WalletButton = styled(Button)`
 //   width: 140px;
 // `
diff --git a/src/components/Header/Navbar/Navbar.tsx b/src/components/Header/Navbar/Navbar.tsx
index 53fbab3..d63afea 100644
--- a/src/components/Header/Navbar/Navbar.tsx
+++ b/src/components/Header/Navbar/Navbar.tsx
@@ -1,3 +1,4 @@
+import { breakpoints } from '@/configs/ui.configs'
 import styled from '@emotion/styled'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
@@ -5,7 +6,7 @@ import React from 'react'
 
 interface NavbarProps {}
 
-const items = [
+export const navItems = [
   {
     label: 'Countdown',
     href: '/countdown',
@@ -49,7 +50,7 @@ const Navbar: React.FC<NavbarProps> = () => {
 
   return (
     <Navigation>
-      {items.map((item, index) =>
+      {navItems.map((item, index) =>
         item?.isDisabled === true ? (
           <NavItemContainer key={index}>
             <NavItem isDisabled active={isActivePath(item.href)}>
@@ -73,9 +74,7 @@ const Navbar: React.FC<NavbarProps> = () => {
 const Navigation = styled.ul`
   display: flex;
   align-items: center;
-  position: absolute;
-  left: 50%;
-  transform: translateX(-50%);
+
   gap: 41px;
   list-style-type: none;
 
@@ -93,7 +92,13 @@ const Navigation = styled.ul`
   }
 
   @media (max-width: 768px) {
-    display: none;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    position: relative;
+    left: unset;
+    transform: none;
+    gap: 10px;
   }
 `
 
@@ -115,6 +120,11 @@ const NavItem = styled.li<{ active?: boolean; isDisabled?: boolean }>`
       margin-right: 6px;
     }
   `}
+
+  @media (max-width: ${breakpoints.sm}px) {
+    font-size: 12px;
+    line-height: 16px;
+  }
 `
 
 const NavItemContainer = styled.div`