From 5faa18d343ee82fd9f394163126907edc60f1762 Mon Sep 17 00:00:00 2001
From: TerryM <chiachintat10@gmail.com>
Date: Sun, 31 May 2026 03:36:54 +0800
Subject: [PATCH] fix: make desktop search a button and keep nav down to 1000px

- Replace the desktop header search field with a search icon button that
  opens the search panel on click (matching mobile), so there is one search
  input (in the panel) instead of a redundant header field, and the trigger
  no longer vanishes when the panel opens.
- Lower the nav collapse breakpoint from 1100px to 1000px so the full menu
  stays visible on smaller desktop widths before falling back to the
  hamburger menu.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 src/layouts/PublicLayout.tsx | 32 ++++++++++++--------------------
 1 file changed, 12 insertions(+), 20 deletions(-)

diff --git a/src/layouts/PublicLayout.tsx b/src/layouts/PublicLayout.tsx
index 82ce933..dc2834a 100644
--- a/src/layouts/PublicLayout.tsx
+++ b/src/layouts/PublicLayout.tsx
@@ -537,7 +537,7 @@ export function PublicLayout() {
 
         <div className="mx-auto hidden max-w-[1280px] px-4 py-[15px] min-[440px]:px-5 sm:px-6 md:block md:px-9 xl:px-0">
           {/* Single row (md+): logo | scrollable nav (左對齊，可橫向滑動) | 搜尋 + 語言 */}
-          <div className="flex h-10 items-center gap-2 min-[1100px]:gap-0 lg:gap-4">
+          <div className="flex h-10 items-center gap-2 min-[1000px]:gap-0 lg:gap-4">
             <div className="flex min-w-0 shrink items-center gap-2.5 text-xl font-bold tracking-wide text-ark-gold">
               {/* Logo → home; page-name text → scroll to top of the current page. */}
               <Link
@@ -563,7 +563,7 @@ export function PublicLayout() {
             </div>
 
             <nav
-              className="header-nav-scroll hidden min-w-0 flex-1 items-center justify-center gap-4 overflow-x-auto overflow-y-hidden py-0.5 min-[1100px]:flex lg:gap-5"
+              className="header-nav-scroll hidden min-w-0 flex-1 items-center justify-center gap-4 overflow-x-auto overflow-y-hidden py-0.5 min-[1000px]:flex lg:gap-5"
               aria-label={t("mainNav")}
             >
               <Link
@@ -610,28 +610,20 @@ export function PublicLayout() {
               </Link>
             </nav>
 
-            <div className="flex min-w-0 flex-1 items-center justify-end gap-2 min-[1100px]:flex-none">
-              <div
-                ref={desktopSearchRef}
-                className={`hidden md:block ${
-                  desktopSearchOpen ? "pointer-events-none opacity-0" : ""
-                }`}
-              >
+            <div className="flex min-w-0 flex-1 items-center justify-end gap-2 min-[1000px]:flex-none">
+              <div ref={desktopSearchRef} className="hidden md:block">
                 <button
                   type="button"
                   onClick={() => setDesktopSearchOpen(true)}
-                  className="flex h-10 min-w-0 flex-1 items-center gap-2 rounded-full border border-ark-line bg-[#1a1b20] py-2 pl-3 pr-3 text-left shadow-inner outline-none transition hover:border-ark-gold/50 focus-visible:ring-2 focus-visible:ring-ark-gold/60 focus-visible:ring-offset-2 focus-visible:ring-offset-ark-bg min-[1100px]:w-44 min-[1100px]:flex-none lg:pr-4 xl:w-52"
+                  className={`inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-full border bg-[#1a1b20] outline-none transition hover:border-ark-gold/50 hover:text-ark-gold focus-visible:ring-2 focus-visible:ring-ark-gold/80 focus-visible:ring-offset-2 focus-visible:ring-offset-ark-bg ${
+                    desktopSearchOpen
+                      ? "border-ark-gold/70 text-ark-gold"
+                      : "border-ark-line text-neutral-200"
+                  }`}
                   aria-label={t("searchNow")}
                   aria-expanded={desktopSearchOpen}
                 >
-                  <SearchIcon size={16} className="shrink-0 text-[#c6c7cf]" />
-                  <span
-                    className={`min-w-0 flex-1 truncate text-sm ${
-                      q.trim() ? "text-neutral-200" : "text-[#777985]"
-                    }`}
-                  >
-                    {q.trim() || t("searchPlaceholder")}
-                  </span>
+                  <SearchIcon size={18} />
                 </button>
               </div>
               <LanguageDropdown
@@ -643,7 +635,7 @@ export function PublicLayout() {
               <button
                 ref={desktopMenuButtonRef}
                 type="button"
-                className="inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-full border border-ark-line bg-[#1a1b20] text-neutral-200 outline-none focus-visible:ring-2 focus-visible:ring-ark-gold/80 focus-visible:ring-offset-2 focus-visible:ring-offset-ark-bg min-[1100px]:hidden"
+                className="inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-full border border-ark-line bg-[#1a1b20] text-neutral-200 outline-none focus-visible:ring-2 focus-visible:ring-ark-gold/80 focus-visible:ring-offset-2 focus-visible:ring-offset-ark-bg min-[1000px]:hidden"
                 onClick={() => {
                   setDesktopSearchOpen(false);
                   setOpen((v) => !v);
@@ -659,7 +651,7 @@ export function PublicLayout() {
         {open ? (
           <div
             ref={menuRef}
-            className={`${headerMenuAnimationClass} fixed inset-x-0 top-[64px] z-50 grid gap-2 bg-[#08070c] px-4 py-3 shadow-2xl shadow-black/50 min-[440px]:px-5 sm:px-6 md:top-[70px] md:px-9 min-[1100px]:hidden`}
+            className={`${headerMenuAnimationClass} fixed inset-x-0 top-[64px] z-50 grid gap-2 bg-[#08070c] px-4 py-3 shadow-2xl shadow-black/50 min-[440px]:px-5 sm:px-6 md:top-[70px] md:px-9 min-[1000px]:hidden`}
           >
             <Link
               to="/browse"