refactor: Main nav location and UI improvement

.nvmrc

@@ -1 +1 @@
-lts/iron
+lts/jod

package.json

@@ -18,6 +18,7 @@
 		"@faustwp/blocks": "^4.1.0",
 		"@faustwp/cli": "^3.1.1",
 		"@faustwp/core": "^3.1.0",
+		"@headlessui/react": "^2.2.0",
 		"@heroicons/react": "^2.1.5",
 		"@icons-pack/react-simple-icons": "^10.0.0",
 		"@mdx-js/loader": "^3.0.1",
@@ -55,7 +56,7 @@
 		"tailwindcss": "^3.4.4"
 	},
 	"engines": {
-		"node": ">=20"
+		"node": "^22"
 	},
 	"packageManager": "[email protected]+sha512.65a9c38a8172948f617a53619762cd77e12b9950fe1f9239debcb8d62c652f2081824b986fee7c0af6c0a7df615becebe4bf56e17ec27214a87aa29d9e038b4b",
 	"lint-staged": {

src/components/header.jsx

@@ -19,41 +19,43 @@ const socialIcons = [
 
 export default function Header() {
 	return (
-		<header className="container mx-auto flex items-center justify-between bg-gray-900 px-4 py-6 sm:px-6 md:max-w-6xl md:px-8">
-			<div className="flex items-center gap-8">
-				<Link
-					className="transition-duration-75 flex items-center text-xl font-bold transition hover:text-white focus:text-white"
-					href="/"
-					noDefaultStyles
-				>
-					<span className="mr-3">
-						<FaustLogo />
-					</span>
-					Faust.js
-					<span className="align-super text-xs font-light text-gray-500">
-						&trade;
-					</span>
-				</Link>
-			</div>
-			<div className="flex items-center gap-5">
-				<SearchBar />
-				<div className="items-center lg:flex">
-					<PrimaryMenu />
+		<div className="container-blur-bg sticky top-0 z-10 border-b-[0.5px] border-gray-400 bg-gray-900/80">
+			<header className="container mx-auto flex items-center justify-between px-4 py-6 sm:px-6 md:max-w-6xl md:px-8">
+				<div className="flex items-center gap-8">
+					<Link
+						className="transition-duration-75 flex items-center text-xl font-bold transition hover:text-white focus:text-white"
+						href="/"
+						noDefaultStyles
+					>
+						<span className="mr-3">
+							<FaustLogo />
+						</span>
+						Faust.js
+						<span className="align-super text-xs font-light text-gray-500">
+							&trade;
+						</span>
+					</Link>
 				</div>
-				<div className="hidden items-center space-x-4 lg:flex">
-					{socialIcons.map(({ url, name, icon: Icon }) => (
-						<Link
-							className="text-gray-500 hover:text-gray-400"
-							disableExternalIcon
-							href={url}
-							key={name}
-							title={name}
-						>
-							<Icon />
-						</Link>
-					))}
+				<div className="flex items-center gap-5 md:w-full md:justify-between">
+					<PrimaryMenu />
+					<span className="flex gap-5">
+						<SearchBar />
+						<div className="hidden items-center space-x-4 md:flex">
+							{socialIcons.map(({ url, name, icon: Icon }) => (
+								<Link
+									className="text-gray-500 hover:text-gray-400"
+									disableExternalIcon
+									href={url}
+									key={name}
+									title={name}
+								>
+									<Icon />
+								</Link>
+							))}
+						</div>
+					</span>
 				</div>
-			</div>
-		</header>
+			</header>
+		</div>
 	);
 }