🚀 add hamburger menu

uwu-labs · Jul 29, 2023 · 671338e · 671338e
1 parent c7807cf
commit 671338e
Show file tree

Hide file tree

Showing 3 changed files with 107 additions and 0 deletions.
diff --git a/src/assets/ui/hamburger.svg b/src/assets/ui/hamburger.svg
diff --git a/src/components/Header.css b/src/components/Header.css
@@ -45,3 +45,58 @@
     display: none;
   }
 }
+
+.header-hamburger {
+  display: none;
+
+  @media (max-width: 768px) {
+    display: flex;
+  }
+}
+
+.header-hamburger-icon {
+  height: 3.2rem;
+}
+
+.header-drop-shadow {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: calc(100vh - 7rem);
+  background: rgba(28, 31, 34, 0.8);
+  mix-blend-mode: multiply;
+  z-index: 1;
+}
+
+.header-hamburger-menu {
+  z-index: 2;
+  position: absolute;
+  top: 6.6rem;
+  left: 0;
+  width: 100%;
+  height: auto;
+  background: linear-gradient(180deg, #fcfdff 0%, #f5dce8 100%);
+  z-index: 2;
+  padding: 2.4rem 2.4rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.header-hamburger-menu-item {
+  margin-bottom: 1.6rem;
+  font-size: 2rem;
+  font-weight: 700;
+  width: 100%;
+  text-align: left;
+}
+
+.header-hamburger-button-container {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 2.4rem 0;
+}
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -2,8 +2,11 @@ import "./Header.css";
 
 import logo from "../assets/logo.svg";
 import opensea from "../assets/socials/opensea.svg";
+import hamburger from "../assets/ui/hamburger.svg";
+
 import Button from "./Button";
 import { OPENSEA_LINK } from "../app/globals";
+import { useState } from "react";
 
 interface NavItemType {
   label: string;
@@ -22,6 +25,8 @@ const navItems: NavItemType[] = [
 ];
 
 const Header = () => {
+  const [isHamburgerOpen, setIsHamburgerOpen] = useState(false);
+
   return (
     <div className="header">
       <div className="section">
@@ -39,6 +44,45 @@ const Header = () => {
       <div className="header-buy-on-opensea">
         <Button label="Buy on OpenSea" link={OPENSEA_LINK} icon={opensea} />
       </div>
+      <button
+        className="header-hamburger"
+        onClick={() => setIsHamburgerOpen(!isHamburgerOpen)}
+      >
+        <img
+          className="header-hamburger-icon"
+          src={hamburger}
+          alt="hamburger menu"
+        />
+      </button>
+      {
+        // Render hamburger menu
+        isHamburgerOpen && (
+          <>
+            <div className="header-hamburger-menu">
+              {navItems.map((navItem) => (
+                <a
+                  className="header-hamburger-menu-item"
+                  href={navItem.href}
+                  key={navItem.href}
+                >
+                  {navItem.label}
+                </a>
+              ))}
+              <div className="header-hamburger-button-container">
+                <Button
+                  label="Buy on OpenSea"
+                  link={OPENSEA_LINK}
+                  icon={opensea}
+                />
+              </div>
+            </div>
+            <button
+              className="header-drop-shadow"
+              onClick={() => setIsHamburgerOpen(false)}
+            />
+          </>
+        )
+      }
     </div>
   );
 };