Refactor Header component for improved mobile responsiveness; integrate mobile search and navigation, and update button implementation for better accessibility.

Author: Adnanarodiya

src/app/(public)/_components/header.tsx

@@ -7,25 +7,31 @@ import { SearchForm } from './search-form';
 import { auth } from '@/auth';
 import { signInAction, signOutAction } from '../../actions';
 import { LogoIconsSvg } from '@/components/Icons';
+import { Button } from './button';
+import { MobileMenu } from './mobile-menu';
 
 export async function Header() {
   const session = await auth();
 
   return (
-    <header className="fixed top-0 left-0 w-full z-50 py-3 px-6">
-      <div className="border border-hacktoberfest-light-blue rounded-lg py-4 px-6 container mx-auto  backdrop-blur-md shadow-lg">
+    <header className="fixed top-0 left-0 w-full z-50 py-3 px-4 sm:px-6">
+      <div className="border border-hacktoberfest-light-blue rounded-lg py-4 px-4 sm:px-6 container mx-auto backdrop-blur-md shadow-lg">
         <div className="flex justify-between items-center">
           <Link href="/" className="z-5">
             <LogoIconsSvg />
           </Link>
 
-          <SearchForm />
+          {/* Desktop Search - Hidden on mobile */}
+          <div className="hidden md:block">
+            <SearchForm />
+          </div>
 
-          <div className="flex gap-2 lg:ml-40">
+          {/* Desktop Navigation - Hidden on mobile */}
+          <div className="hidden md:flex gap-2 lg:ml-40">
             <form action={session ? signOutAction : signInAction}>
-              <button className="text-white border-white btn btn-ghost border-1 ms-4 hover:bg-blue-700 transition-colors">
+              <Button className="text-xs sm:text-sm">
                 {session && session.user ? 'Sign Out' : 'Sign In'}
-              </button>
+              </Button>
             </form>
             <Link
               href="/contributors"
@@ -43,6 +49,14 @@ export async function Header() {
               <IoLogoGithub size="1.5rem" color="white" title="GitHub" />
             </a>
           </div>
+
+          {/* Mobile Hamburger Menu */}
+          <MobileMenu session={session} />
+        </div>
+
+        {/* Mobile Search - Visible only on mobile */}
+        <div className="md:hidden md:mt-4">
+          <SearchForm />
         </div>
       </div>
     </header>

src/app/(public)/_components/mobile-menu.tsx

@@ -0,0 +1,67 @@
+'use client';
+
+import Link from 'next/link';
+import { useState } from 'react';
+
+import { IoLogoGithub } from 'react-icons/io';
+import { BsPeopleFill } from 'react-icons/bs';
+import { HiMenu, HiX } from 'react-icons/hi';
+
+import { Button } from './button';
+import { signInAction, signOutAction } from '../../actions';
+
+interface MobileMenuProps {
+  session: any;
+}
+
+export function MobileMenu({ session }: MobileMenuProps) {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const toggleMenu = () => setIsOpen(!isOpen);
+
+  return (
+    <div className="md:hidden">
+      {/* Hamburger Button */}
+      <button
+        onClick={toggleMenu}
+        className="text-white hover:text-hacktoberfest-light transition-colors p-2 rounded-lg"
+        aria-label="Toggle menu"
+      >
+        {isOpen ? <HiX size="1.5rem" /> : <HiMenu size="1.5rem" />}
+      </button>
+
+      {/* Mobile Menu Overlay */}
+      {isOpen && (
+        <div className="absolute top-full left-0 right-0 mt-2  bg-hacktoberfest-light-blue border border-hacktoberfest-light-blue rounded-lg py-4 px-4 sm:px-6 container mx-auto backdrop-blur-md shadow-lg">
+          <div className="flex flex-col gap-4">
+            <form action={session ? signOutAction : signInAction}>
+              <Button className="w-full text-center text-xs sm:text-sm">
+                {session && session.user ? 'Sign Out' : 'Sign In'}
+              </Button>
+            </form>
+
+            <Link
+              href="/contributors"
+              className="flex items-center gap-3 text-white hover:text-hacktoberfest-light transition-colors p-3 rounded-lg"
+              onClick={() => setIsOpen(false)}
+            >
+              <BsPeopleFill size="1.2rem" />
+              <span className="text-sm font-medium">Contributors</span>
+            </Link>
+
+            <a
+              href="https://github.com/max-programming/hacktoberfest-projects"
+              target="_blank"
+              rel="noreferrer"
+              className="flex items-center gap-3 text-white hover:text-hacktoberfest-light transition-colors p-3 rounded-lg"
+              onClick={() => setIsOpen(false)}
+            >
+              <IoLogoGithub size="1.2rem" />
+              <span className="text-sm font-medium">GitHub</span>
+            </a>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}