Merge pull request #344 from wpengine/semantic-search-dialog

refactor: Search Box

Author: moonmeister

package.json

@@ -35,7 +35,6 @@
 		"@wpengine/atlas-next": "^3.0.0",
 		"date-fns": "^4.1.0",
 		"date-fns-tz": "^3.2.0",
-		"downshift": "^9.0.9",
 		"feed": "^5.1.0",
 		"graphql": "^16.11.0",
 		"http-status-codes": "^2.3.0",

pnpm-lock.yaml

@@ -1,8 +1,7 @@
 import { SiDiscord, SiGithub } from "@icons-pack/react-simple-icons";
-import { useState } from "react";
 import FaustLogo from "./faust-logo";
 import PrimaryNav from "./primary-nav";
-import SearchBar from "./search-bar";
+import Search from "./search/search";
 import Link from "@/components/link";
 import { classNames } from "@/utils/strings";
 
@@ -20,15 +19,11 @@ const socialIcons = [
 ];
 
 export default function Header() {
-	const [isMenuOpen, setIsMenuOpen] = useState(false);
-	const [isSearchOpen, setIsSearchOpen] = useState(false);
-
 	return (
 		<div
 			className={classNames(
 				"container-blur-bg top-0 border-b-[1px] border-gray-800 bg-gray-900/80",
-				isMenuOpen ? "fixed z-11 w-full" : "sticky z-10",
-				isSearchOpen ? "z-11" : "z-10",
+				"sticky z-10",
 			)}
 		>
 			<header className="container mx-auto flex items-center justify-between px-4 py-6 sm:px-6 md:max-w-6xl md:px-8">
@@ -48,12 +43,9 @@ export default function Header() {
 					</Link>
 				</div>
 				<div className="flex items-center gap-5 md:w-full md:justify-between">
-					<PrimaryNav
-						onMenuToggle={setIsMenuOpen}
-						setIsMenuOpen={setIsMenuOpen}
-					/>
+					<PrimaryNav />
 					<span className="flex gap-5">
-						<SearchBar setIsSearchOpen={setIsSearchOpen} />
+						<Search />
 						<div className="hidden items-center space-x-4 md:flex">
 							{socialIcons.map(({ url, name, icon: Icon }) => (
 								<Link

src/components/header.jsx

@@ -1,6 +1,7 @@
 import localFont from "next/font/local";
 import Footer from "./footer";
 import Header from "./header";
+import SearchBox from "./search/search-box";
 
 const inter = localFont({
 	src: "../fonts/inter-variable-font.woff2",
@@ -20,6 +21,7 @@ export default function Layout({ children }) {
 			<Header />
 			{children}
 			<Footer />
+			<SearchBox />
 		</div>
 	);
 }

src/components/layout.jsx

@@ -31,7 +31,7 @@ const sendMainNavItemSelectEvent = (item) => {
 	});
 };
 
-export default function PrimaryMenu({ isMenuOpen, setIsMenuOpen, className }) {
+export default function PrimaryMenu({ className }) {
 	return (
 		<nav className={classNames("flex items-center space-x-4", className)}>
 			<ul className="hidden flex-row space-x-4 pl-4 md:flex">
@@ -88,10 +88,7 @@ export default function PrimaryMenu({ isMenuOpen, setIsMenuOpen, className }) {
 				</li>
 			</ul>
 			<Popover>
-				<PopoverButton
-					className="group rounded-md px-2 py-1.5 text-white/70 hover:text-white md:hidden"
-					onClick={() => setIsMenuOpen(!isMenuOpen)}
-				>
+				<PopoverButton className="group rounded-md px-2 py-1.5 text-white/70 hover:text-white md:hidden">
 					<span className="sr-only hidden group-data-open:block">
 						Open main nav
 					</span>