terry/Arkie-Library-Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: make desktop search a button and keep nav down to 1000px
All checks were successful
Deploy to Frontend Servers / deploy (push) Successful in 26s
Details

Browse Source 
- 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>
This commit is contained in:
TerryM
2026-05-31 03:36:54 +08:00
parent c71ebba807
commit 5faa18d343
1 changed files with 12 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
src/layouts/PublicLayout.tsx
View File

@@ -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"