fix(mobile style): add mobile menu

ringecosystem · Nov 21, 2024 · 141b193 · 141b193
1 parent 4e9ddc8
commit 141b193
Showing 1 changed file with 44 additions and 1 deletion.
diff --git a/src/components/header.tsx b/src/components/header.tsx
@@ -1,6 +1,8 @@
+import { useState } from "react";
 import data from "../data/header.json";
 
 export default function Header() {
+  const [showMenu, setShowMenu] = useState<boolean>(false);
   return (
     <section className="flex items-center justify-between p-[20px] sm:p-[60px] border-b-[1px] border-b-solid border-b-black">
       <img
@@ -18,11 +20,52 @@ export default function Header() {
           Submit Proposals
         </button>
       </div>
-      <div className="flex sm:hidden flex-col gap-[3px]">
+      <div
+        onClick={() => {
+          setShowMenu(!showMenu);
+        }}
+        className="flex sm:hidden flex-col gap-[3px]"
+      >
         <div className="w-[17px] h-[3px] bg-black" />
         <div className="w-[17px] h-[3px] bg-black" />
         <div className="w-[17px] h-[3px] bg-black" />
       </div>
+      <div
+        className={`fixed sm:hidden top-[62px] right-0 h-[calc(100vh-61px)] w-[100vw] py-[20px] flex flex-col items-center gap-[20px] bg-white z-[1000] duration-500 ${
+          showMenu ? "translate-x-0" : "translate-x-[100vw]"
+        }`}
+      >
+        <div className="flex flex-grow flex-col items-center justify-center gap-[68px]">
+          {data.menu.map((item: any, index: number) => (
+            <a key={item.name + item.url + "menu"} href={item.url}>
+              <p className="text-[16px] leading-[26px] font-[600]">
+                {item.name}
+              </p>
+            </a>
+          ))}
+          <button className="bg-black text-white h-[38px] rounded-[19px] px-[15px]">
+            Submit Proposals
+          </button>
+        </div>
+        <div className="flex justify-end gap-[20px] mb-[20px] flex-shrink-0">
+          <a
+            href="/"
+            className="w-[30px] h-[30px] block bg-[url('/icons/x.svg')] bg-center bg-no-repeat bg-contain"
+          />
+          <a
+            href="/"
+            className="w-[30px] h-[30px] block bg-[url('/icons/telegram.svg')] bg-center bg-no-repeat bg-contain"
+          />
+          <a
+            href="/"
+            className="w-[30px] h-[30px] block bg-[url('/icons/github.svg')] bg-center bg-no-repeat bg-contain"
+          />
+          <a
+            href="/"
+            className="w-[30px] h-[30px] block bg-[url('/icons/discord.svg')] bg-center bg-no-repeat bg-contain"
+          />
+        </div>
+      </div>
     </section>
   );
 }