Add responsive header

Author: Rikthepixel

package-lock.json

@@ -8,6 +8,7 @@
     "start": "next start"
   },
   "dependencies": {
+    "@heroicons/react": "^2.0.16",
     "@types/node": "18.15.0",
     "@types/react": "18.0.28",
     "@types/react-dom": "18.0.11",

package.json

@@ -1,7 +1,9 @@
+import { ReactNode, useState } from "react";
 import { useRouter } from "next/router";
-import React, { ReactNode } from "react";
-import { twMerge } from "tailwind-merge";
+import Bars3Icon from "@heroicons/react/24/solid/Bars3Icon";
+
 import Link from "./Link";
+import Button from "../controls/Button";
 
 export interface HeaderProps {
 
@@ -11,26 +13,42 @@ const NavLink = ({ href, currentHref, children }: {
   href: string,
   currentHref: string,
   children: ReactNode;
-}) => (
-  <Link color="primary" className={"text-lg font-bold" + (currentHref === href ? " text-primary-dark" : "")} href={href}>
-    {children}
-  </Link>
-);
+}) => {
+  const active = currentHref === href;
+
+  return (
+    <Link
+      className="text-lg font-bold py-2 border-y border-primary hover:border-primary-light aria-[current='page']:text-primary-dark aria-[current='page']:border-primary first-of-type:border-t-2 last-of-type:border-b-2 md:border-0 md:first-of-type:border-t-0 md:last-of-type:border-b-0"
+      aria-current={active ? "page" : undefined}
+      color="primary"
+      href={href}
+    >
+      {children}
+    </Link>
+  );
+};
 
 const Header = ({ }: HeaderProps) => {
   const router = useRouter();
 
+  const [open, setOpen] = useState(false);
+
   return (
-    <header className="flex items-center w-full gap-12 px-8 py-4">
-      <Link color="primary" className={"text-4xl font-bold"} href="/">
+    <header className="relative flex items-center w-full gap-12 px-8 py-4">
+      <Link color="primary" className="text-2xl font-bold lg:text-4xl" href="/">
         Commit Rocket
       </Link>
-      <NavLink href="/" currentHref={router.asPath}>
-        Home
-      </NavLink>
-      <NavLink href="/about" currentHref={router.asPath}>
-        About
-      </NavLink>
+      <Button color="secondary" className="p-2 ml-auto rounded-full md:hidden" onClick={() => setOpen(!open)}>
+        <Bars3Icon className="w-6 h-6" />
+      </Button>
+      <div aria-expanded={open} className="absolute flex flex-col bg-fill gap-0 p-4 top-full inset-x-4 rounded-md shadow shadow-primary z-10 aria-[expanded='false']:hidden md:aria-[expanded='false']:flex md:flex-row md:items-center md:p-0 md:shadow-none md:static md:bg-transparent md:gap-12">
+        <NavLink href="/" currentHref={router.asPath}>
+          Home
+        </NavLink>
+        <NavLink href="/about" currentHref={router.asPath}>
+          About
+        </NavLink>
+      </div>
     </header>
   );
 };

src/components/navigation/Header.tsx

@@ -44,7 +44,6 @@ const membersContainerAnim = {
   hidden: {},
   show: {
     transition: {
-      delay: 0.25,
       duration: 0.5,
       staggerChildren: 0.1
     }