From 3d62781b70f14bffcbc04cacd18eaf053c8c9f28 Mon Sep 17 00:00:00 2001
From: Aidan <aidan@p0ntus.com>
Date: Mon, 6 Jan 2025 12:39:09 -0500
Subject: [PATCH] add mobile menu, title link

---
 app/components/Header.tsx | 33 ++++++++++++++++++++++++---------
 1 file changed, 24 insertions(+), 9 deletions(-)

diff --git a/app/components/Header.tsx b/app/components/Header.tsx
index a67ee75..b05d886 100644
--- a/app/components/Header.tsx
+++ b/app/components/Header.tsx
@@ -1,20 +1,35 @@
+"use client";
+
+import { useState } from 'react'
 import Link from 'next/link'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faWordpressSimple } from '@fortawesome/free-brands-svg-icons'
-import { faLink, faHouse, faUser, faPhone } from '@fortawesome/free-solid-svg-icons'
+import { faLink, faHouse, faUser, faPhone, faBars, faTimes } from '@fortawesome/free-solid-svg-icons'
 
 export default function Header() {
+  const [isOpen, setIsOpen] = useState(false)
+
+  const toggleMenu = () => {
+    setIsOpen(!isOpen)
+  }
+
   return (
     <header className="bg-gray-800">
-      <nav className="container mx-auto px-4 py-6">
-        <ul className="flex space-x-12">
-          <li><Link href="/" className="flex flex-col sm:flex-row items-center text-gray-300 hover:text-white transition-colors"><FontAwesomeIcon icon={faHouse} className="text-md mr-2" /> Home</Link></li>
-          <li><Link href="/about" className="flex flex-col sm:flex-row items-center text-gray-300 hover:text-white transition-colors"><FontAwesomeIcon icon={faUser} className="text-md mr-2" /> About</Link></li>
-          <li><Link href="/contact" className="flex flex-col sm:flex-row items-center text-gray-300 hover:text-white transition-colors"><FontAwesomeIcon icon={faPhone} className="text-md mr-2" /> Contact</Link></li>
-          <li><Link href="/domains" className="flex flex-col sm:flex-row items-center text-gray-300 hover:text-white transition-colors"><FontAwesomeIcon icon={faLink} className="text-md mr-2" /> Domains</Link></li>
-          <li><Link href="https://blog.aidxn.fun/" className="flex flex-col sm:flex-row items-center text-gray-300 hover:text-white transition-colors"><FontAwesomeIcon icon={faWordpressSimple} className="text-md mr-2" /> Blog</Link></li>
+      <nav className="container mx-auto px-4 py-6 flex justify-between items-center">
+        <Link href="/" className="text-gray-300 text-2xl">aidxn.cc</Link>
+        <div className="md:hidden">
+          <button onClick={toggleMenu} className="text-gray-300 focus:outline-none">
+            <FontAwesomeIcon icon={isOpen ? faTimes : faBars} className="text-2xl" />
+          </button>
+        </div>
+        <ul className={`flex-col md:flex-row md:flex space-x-0 md:space-x-12 absolute md:static bg-gray-800 md:bg-transparent w-full md:w-auto left-0 md:left-auto top-16 md:top-auto transition-all duration-300 ease-in-out ${isOpen ? 'flex' : 'hidden'}`}>
+          <li><Link href="/" className="flex items-center text-gray-300 hover:text-white hover:bg-gray-700 rounded-md px-3 py-2 transition-all"><FontAwesomeIcon icon={faHouse} className="text-md mr-2" /> Home</Link></li>
+          <li><Link href="/about" className="flex items-center text-gray-300 hover:text-white hover:bg-gray-700 rounded-md px-3 py-2 transition-all"><FontAwesomeIcon icon={faUser} className="text-md mr-2" /> About</Link></li>
+          <li><Link href="/contact" className="flex items-center text-gray-300 hover:text-white hover:bg-gray-700 rounded-md px-3 py-2 transition-all"><FontAwesomeIcon icon={faPhone} className="text-md mr-2" /> Contact</Link></li>
+          <li><Link href="/domains" className="flex items-center text-gray-300 hover:text-white hover:bg-gray-700 rounded-md px-3 py-2 transition-all"><FontAwesomeIcon icon={faLink} className="text-md mr-2" /> Domains</Link></li>
+          <li><Link href="https://blog.aidxn.fun/" className="flex items-center text-gray-300 hover:text-white hover:bg-gray-700 rounded-md px-3 py-2 transition-all"><FontAwesomeIcon icon={faWordpressSimple} className="text-md mr-2" /> Blog</Link></li>
         </ul>
       </nav>
     </header>
   )
-}
+}
\ No newline at end of file