fix: lower desktop header breakpoint

This commit is contained in:
TerryM
2026-05-31 03:04:27 +08:00
parent 6b3211f26f
commit 92a8a83585

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"> <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 (左對齊,可橫向滑動) | 搜尋 + 語言 */} {/* Single row (md+): logo | scrollable nav (左對齊,可橫向滑動) | 搜尋 + 語言 */}
<div className="flex h-10 items-center gap-2 min-[1200px]:gap-0 lg:gap-4"> <div className="flex h-10 items-center gap-2 min-[1100px]: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"> <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. */} {/* Logo → home; page-name text → scroll to top of the current page. */}
<Link <Link
@@ -563,7 +563,7 @@ export function PublicLayout() {
</div> </div>
<nav <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-[1200px]: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-[1100px]:flex lg:gap-5"
aria-label={t("mainNav")} aria-label={t("mainNav")}
> >
<Link <Link
@@ -610,10 +610,10 @@ export function PublicLayout() {
</Link> </Link>
</nav> </nav>
<div className="flex min-w-0 flex-1 items-center justify-end gap-2 min-[1200px]:flex-none"> <div className="flex min-w-0 flex-1 items-center justify-end gap-2 min-[1100px]:flex-none">
<div <div
ref={desktopSearchRef} ref={desktopSearchRef}
className="hidden 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 shadow-inner md:flex min-[1200px]:w-44 min-[1200px]:flex-none lg:pr-4 xl:w-52" className="hidden 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 shadow-inner md:flex min-[1100px]:w-44 min-[1100px]:flex-none lg:pr-4 xl:w-52"
> >
<button <button
type="button" type="button"
@@ -645,7 +645,7 @@ export function PublicLayout() {
<button <button
ref={desktopMenuButtonRef} ref={desktopMenuButtonRef}
type="button" 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-[1200px]: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-[1100px]:hidden"
onClick={() => { onClick={() => {
setDesktopSearchOpen(false); setDesktopSearchOpen(false);
setOpen((v) => !v); setOpen((v) => !v);
@@ -661,7 +661,7 @@ export function PublicLayout() {
{open ? ( {open ? (
<div <div
ref={menuRef} 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-[1200px]: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-[1100px]:hidden`}
> >
<Link <Link
to="/browse" to="/browse"