feat(storefront): fix navbar filtering and add product search

apps/web/src/app/components/Navigation.tsx

@@ -12,11 +12,23 @@ const navItemStyle: React.CSSProperties = {
 
 export function Navigation() {
   const [sidebarOpen, setSidebarOpen] = useState(false);
+  const [searchOpen, setSearchOpen] = useState(false);
+  const [searchQuery, setSearchQuery] = useState("");
   const [cartCount, setCartCount] = useState(0);
   const [userName, setUserName] = useState<string | null>(null);
   const location = useLocation();
   const navigate = useNavigate();
 
+  function submitSearch(e: React.FormEvent) {
+    e.preventDefault();
+    const q = searchQuery.trim();
+    if (!q) return;
+    setSearchOpen(false);
+    setSidebarOpen(false);
+    setSearchQuery("");
+    navigate(`/shop?q=${encodeURIComponent(q)}`);
+  }
+
   useEffect(() => {
     const update = () => setCartCount(cartStore.getCartCount());
     update();
@@ -45,24 +57,32 @@ export function Navigation() {
     navigate("/");
   }
 
-  // Close sidebar on route change
+  // Close sidebar + search on route change
   useEffect(() => {
     setSidebarOpen(false);
+    setSearchOpen(false);
   }, [location.pathname]);
 
+  // Close the search overlay on Escape
+  useEffect(() => {
+    if (!searchOpen) return;
+    const onKey = (e: KeyboardEvent) => { if (e.key === "Escape") setSearchOpen(false); };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [searchOpen]);
+
   // Lock body scroll while sidebar is open
   useEffect(() => {
     document.body.style.overflow = sidebarOpen ? "hidden" : "";
     return () => { document.body.style.overflow = ""; };
   }, [sidebarOpen]);
 
   const leftLinks = [
-    { label: "MENSWEAR", href: "/shop?category=Fashion" },
-    { label: "WOMENSWEAR", href: "/shop?category=Fashion" },
+    { label: "MENSWEAR", href: "/shop?gender=Men" },
+    { label: "WOMENSWEAR", href: "/shop?gender=Women" },
     { label: "BEAUTY", href: "/shop?category=Beauty" },
     { label: "ACCESSORIES", href: "/shop?category=Accessories" },
     { label: "SALE", href: "/shop?filter=sale" },
-    { label: "SEARCH", href: "/shop" },
   ];
 
   return (
@@ -87,6 +107,14 @@ export function Navigation() {
                   {link.label}
                 </Link>
               ))}
+              <button
+                onClick={() => setSearchOpen(o => !o)}
+                className="hover:opacity-50 transition-opacity duration-200 whitespace-nowrap"
+                style={navItemStyle}
+                aria-label="Search"
+              >
+                SEARCH
+              </button>
             </nav>
 
             <Link
@@ -144,12 +172,64 @@ export function Navigation() {
               VIBECART
             </Link>
 
-            <Link to="/cart" style={navItemStyle} className="hover:opacity-50 transition-opacity whitespace-nowrap">
-              BAG ({cartCount})
-            </Link>
+            <div className="flex items-center gap-4 shrink-0">
+              <button
+                onClick={() => setSearchOpen(o => !o)}
+                aria-label="Search"
+                className="hover:opacity-50 transition-opacity flex items-center"
+              >
+                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#111" strokeWidth="1.4">
+                  <circle cx="11" cy="11" r="7" />
+                  <line x1="16.5" y1="16.5" x2="21" y2="21" />
+                </svg>
+              </button>
+
+              <Link to="/cart" style={navItemStyle} className="hover:opacity-50 transition-opacity whitespace-nowrap">
+                BAG ({cartCount})
+              </Link>
+            </div>
           </div>
 
         </div>
+
+        {/* ── Search overlay (drops down under the header) ── */}
+        {searchOpen && (
+          <div style={{ borderTop: "1px solid #EAEAEA" }} className="bg-white">
+            <div className="max-w-[1440px] mx-auto px-6 lg:px-10 py-5">
+              <form onSubmit={submitSearch} className="flex items-center gap-3">
+                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#111" strokeWidth="1.4" className="shrink-0">
+                  <circle cx="11" cy="11" r="7" />
+                  <line x1="16.5" y1="16.5" x2="21" y2="21" />
+                </svg>
+                <input
+                  autoFocus
+                  type="text"
+                  value={searchQuery}
+                  onChange={e => setSearchQuery(e.target.value)}
+                  placeholder="Search for products, designers…"
+                  className="flex-1 outline-none bg-transparent"
+                  style={{
+                    fontFamily: "'Jost', 'Helvetica Neue', Helvetica, Arial, sans-serif",
+                    fontSize: "15px",
+                    letterSpacing: "0.02em",
+                    color: "#111111",
+                  }}
+                />
+                <button
+                  type="button"
+                  onClick={() => setSearchOpen(false)}
+                  aria-label="Close search"
+                  className="hover:opacity-50 transition-opacity shrink-0"
+                >
+                  <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+                    <line x1="1" y1="1" x2="15" y2="15" stroke="#111" strokeWidth="1.2" />
+                    <line x1="15" y1="1" x2="1" y2="15" stroke="#111" strokeWidth="1.2" />
+                  </svg>
+                </button>
+              </form>
+            </div>
+          </div>
+        )}
       </header>
 
       {/* ── Sidebar overlay ── */}