From 4f2c98acb852f249cf9989a6d78de54a929767ba Mon Sep 17 00:00:00 2001
From: gandholi-kumar <gandholi.kumar@gmail.com>
Date: Sat, 7 Oct 2023 21:49:49 +0530
Subject: [PATCH] Added Hamburger menu for smaller devices

---
 src/components/Header/Header.jsx | 128 ++++++++++++++++++-------------
 src/index.css                    |   5 +-
 2 files changed, 77 insertions(+), 56 deletions(-)

diff --git a/src/components/Header/Header.jsx b/src/components/Header/Header.jsx
index 0156090..05ec865 100644
--- a/src/components/Header/Header.jsx
+++ b/src/components/Header/Header.jsx
@@ -1,82 +1,104 @@
-import { MdPeople, MdInsertDriveFile } from "react-icons/md";
+import {
+  MdPeople,
+  MdInsertDriveFile,
+  MdClose,
+  MdMenu,
+  MdHome,
+} from "react-icons/md";
 import { AiFillGithub } from "react-icons/ai";
 import { Link } from "react-router-dom";
 
 import { HiMoon, HiSun } from "react-icons/hi";
-import { ThemeContext } from '../../context/ThemeContext'
-import { useContext } from "react";
+import { ThemeContext } from "../../context/ThemeContext";
+import { useContext, useState } from "react";
 
 function Header({ notice }) {
-  const { toggleTheme } = useContext(ThemeContext);
-
+  const { theme, toggleTheme } = useContext(ThemeContext);
+  const [open, setOpen] = useState(false);
 
   const navLink = [
     {
-      name: 'Home',
-      link: '/',
-      icon: ''
+      name: "Home",
+      link: "/",
+      icon: <MdHome size="1.2rem" />,
     },
     {
-      name: 'Doc',
-      link: '/doc',
-      icon: <MdInsertDriveFile size='1rem' />
+      name: "Doc",
+      link: "/doc",
+      icon: <MdInsertDriveFile size="1.2rem" />,
     },
     {
-      name: 'Contributors',
-      link: '/Contributors',
-      icon: <MdPeople size='1.25rem' />
+      name: "Contributors",
+      link: "/Contributors",
+      icon: <MdPeople size="1.2rem" />,
     },
     {
-      name: '',
-      link: 'https://github.com/devvsakib/github-error-solve',
-      icon: <AiFillGithub size='1.45rem' />
-    }
-  ]
+      name: "Github",
+      link: "https://github.com/devvsakib/github-error-solve",
+      icon: <AiFillGithub size="1.2rem" />,
+      isExternalURL: true,
+    },
+  ];
 
   return (
     <header className="p-4 shadow-lg backdrop-blur-sm sticky top-0 z-50">
-      <div className="w-full md:w-5/6 mx-auto flex flex-col md:flex-row justify-between items-center">
-        {/* <h1 className="text-xl font-bold">
-          GITHUB <span className="text-primary line-through">ERROR</span> SOLVE
-        </h1> */}
-        <Link to={'/'}>
-          <img src="/assets/logo.png" className="w-36 bg-transparent invert dark:invert-0" alt="GES" />
+      <div className="w-full md:w-5/6 mx-auto flex flex-row md:flex-row justify-between items-center">
+        {/* Logo */}
+        <Link to={"/"}>
+          <img
+            src="/assets/logo.png"
+            className="w-36 bg-transparent invert dark:invert-0"
+            alt="GES"
+          />
         </Link>
-        <div className="flex mt-2 md:mt-0 items-center gap-7 text-sm">
 
-          {
-            navLink.map((link, index) => {
-              return (
-                link.name == "" ? (<a target='_blank' href={link.link} className="githubbtn">{link.icon}</a>
-                ) : link.name == "Doc" ? (<Link className="flex items-center gap-1" to={link.link}>{link.icon}{link.name}</Link>
-                ) : link.name == "Contributors" ? (<Link className="flex items-center gap-1" to={link.link}>{link.icon}{link.name}</Link>
-                ) : link.name == "Home" ? (<Link className="flex items-center gap-1" to={link.link}>{link.icon}{link.name}</Link>
-                ) : null
-              )
-            })
-          }
+        {/* Menu icon */}
+        <div
+          onClick={() => setOpen((val) => !val)}
+          className="cursor-pointer md:hidden"
+        >
+          {open ? <MdClose size="1.2rem" /> : <MdMenu size="1.2rem" />}
+        </div>
 
-          <p className="text-lg cursor-pointer" onClick={toggleTheme}>
+        {/* Nav link items */}
+        <div
+          className={`
+          md:flex md:items-center 
+          md:pb-0 md:gap-6 
+          md:static md:z-auto 
+          md:w-auto md:pl-0 
+          md:bg-transparent
+          grid gap-2 absolute 
+          z-[-1] left-0 w-full py-2 pl-8
+          transition-all duration-500 ease-in 
+          ${open ? (theme === "dark" ? "bg-dark/90" : "bg-white/90") : ""}
+          ${open ? "top-14" : "top-[-490px]"}`}
+        >
+          {navLink.map((link, index) => {
+            return (
+              <div key={`${link.name}-${index}`}>
+                {link?.isExternalURL ? (
+                  <a target="_blank" href={link.link} className="githubBtn">
+                    {link.icon}
+                  </a>
+                ) : (
+                  <Link className="flex items-center gap-1" to={link.link}>
+                    {link.icon}
+                    {link.name}
+                  </Link>
+                )}
+              </div>
+            );
+          })}
+
+          <div className="text-lg cursor-pointer" onClick={toggleTheme}>
             <HiMoon className="dark:hidden" />
             <HiSun className="hidden dark:inline" />
-          </p>
-
-
-
-          {/* <MdConstruction className="text-lg" />
-          <h6>Under Construction</h6>
-
-          <Link to={'/doc'}>Doc</Link>
-
-          <Link to={'/Contributors'}>Contributors</Link>
-
-          <a target='_blank' href="https://github.com/devvsakib/github-error-solve"><AiFillGithub size='1.25rem'/></a> */}
-
-
+          </div>
         </div>
       </div>
     </header>
   );
 }
 
-export default Header;
\ No newline at end of file
+export default Header;
diff --git a/src/index.css b/src/index.css
index 20bde79..49cd9cd 100644
--- a/src/index.css
+++ b/src/index.css
@@ -77,7 +77,7 @@ html {
   scrollbar-width: none;
 }
 
-.githubbtn {
+.githubBtn {
   color: #9912d8;
   animation: pulse 2s linear infinite alternate;
 }
@@ -96,5 +96,4 @@ html {
   }
 }
 
-
-/*# sourceMappingURL=style.css.map */
\ No newline at end of file
+/*# sourceMappingURL=style.css.map */