feat: made navbar good

FrancescoXX · Jan 24, 2023 · 7217471 · 7217471
1 parent 579540e
commit 7217471
Showing 1 changed file with 27 additions and 28 deletions.
diff --git a/src/components/Header.js b/src/components/Header.js
@@ -1,6 +1,5 @@
-import { BsX } from "react-icons/bs"
+import { RiMenu4Fill } from "react-icons/ri"
 import { useState, useEffect } from "react"
-import { GiHamburgerMenu } from "react-icons/gi"
 import Link from "next/link"
 
 // import navbar data
@@ -22,7 +21,7 @@ const Navbar = () => {
       <header className="my-[0] w-full px-0 py-[3em] md:p-[3em]">
         <div className="container px-1 sm:px-2">
           <nav className="flex items-start justify-between  md:justify-center">
-            <div className="relative flex w-full flex-wrap items-center justify-between gap-6">
+            <div className="relative flex w-full flex-wrap items-center justify-between gap-6 z-50">
               <Link href="/">
                 <Image
                   width={50}
@@ -35,38 +34,38 @@ const Navbar = () => {
                 />
               </Link>
               <button
-                className="text-4xl"
+                className="text-4xl z-50 lg:hidden  text-white bg-[#030e2c] p-2 rounded"
                 aria-label="Menu button"
+                type="button"
                 onClick={() => setMenuActive(!menuActive)}
               >
-                <BsX />
+                <RiMenu4Fill />
               </button>
               <div
-                className={`w-full h-screen ${menuActive ? '' : 'hidden'}`}
+                className={`w-full h-screen -z-40 fixed bg-[#030e2c] flex p-20 top-0 left-0 ${menuActive ? "z-40" : ""} flex-col items-center justify-center gap-[2rem] lg:flex-row lg:gap-[0.6rem] transition-all duration-1000 lg:w-max lg:h-max lg:!z-40 lg:static lg:bg-inherit lg:p-0 lg:top-auto lg:left-auto lg:![clip-path:unset] lg:transition-none`}
+                style={{ clipPath: menuActive ? "circle(100% at 50% 50%)" : "circle(0% at 100% 0)" }}
               >
-                <div className="flex list-none flex-col items-center justify-center gap-[2rem] lg:flex-row lg:gap-[0.6rem]">
-                  {navItems.map((navItem, idx) => (
-                    <Link
-                      href={navItem.href}
-                      key={idx}
-                      onClick={() => {
-                        window.localStorage.setItem("active", navItem.href)
-                      }}
-                      onKeyDown={() => {
-                        window.localStorage.setItem("active", navItem.href)
-                      }}
-                      role="menuitem"
-                      tabIndex={0}
-                      className={`hov-bg-theme w-full rounded  px-4 py-2 font-bold transition-all ease-out hover:-translate-y-1 hover:cursor-pointer lg:w-auto
+                {navItems.map((navItem, idx) => (
+                  <Link
+                    href={navItem.href}
+                    key={idx}
+                    onClick={() => {
+                      window.localStorage.setItem("active", navItem.href)
+                    }}
+                    onKeyDown={() => {
+                      window.localStorage.setItem("active", navItem.href)
+                    }}
+                    role="menuitem"
+                    tabIndex={0}
+                    className={`hov-bg-theme w-full rounded  px-4 py-2 font-bold transition-all ease-out hover:-translate-y-1 hover:cursor-pointer lg:w-auto
                     ${activeButton === navItem.href
-                          ? "bg-theme bg-[#70b7e6] text-white"
-                          : "bg-white text-black"
-                        }`}
-                    >
-                      {navItem.pageName}
-                    </Link>
-                  ))}
-                </div>
+                        ? "bg-theme bg-[#70b7e6] text-white"
+                        : "bg-white text-black"
+                      }`}
+                  >
+                    {navItem.pageName}
+                  </Link>
+                ))}
               </div>
             </div>
           </nav>