371 lines
14 KiB
TypeScript
371 lines
14 KiB
TypeScript
import { Globe, Menu, Search as SearchIcon, X } from "lucide-react";
|
|
import { useState } from "react";
|
|
import { Link, Outlet, useLocation, useNavigate } from "react-router-dom";
|
|
import { ArkLogoMark } from "../components/ArkLogoMark";
|
|
import { useI18n, type Lang } from "../i18n";
|
|
import { adminUiPrefix } from "../adminPaths";
|
|
|
|
type PublicNavWhich =
|
|
| "home"
|
|
| "browseAll"
|
|
| "categories"
|
|
| "browseLatest"
|
|
| "browseRecommended"
|
|
| "browsePopular"
|
|
| "wallet"
|
|
| "about";
|
|
|
|
function navIsActive(
|
|
pathname: string,
|
|
search: string,
|
|
hash: string,
|
|
which: PublicNavWhich,
|
|
): boolean {
|
|
const sp = new URLSearchParams(search);
|
|
switch (which) {
|
|
case "home":
|
|
return pathname === "/";
|
|
case "browseAll":
|
|
return pathname === "/browse" && !sp.has("sort");
|
|
case "categories":
|
|
return pathname === "/" && hash === "#categories";
|
|
case "browseLatest":
|
|
return pathname === "/browse" && sp.get("sort") === "latest";
|
|
case "browseRecommended":
|
|
return pathname === "/browse" && sp.get("sort") === "recommended";
|
|
case "browsePopular":
|
|
return pathname === "/browse" && sp.get("sort") === "popular";
|
|
case "wallet":
|
|
return pathname === "/wallet";
|
|
case "about":
|
|
return pathname === "/about";
|
|
default:
|
|
return false;
|
|
}
|
|
}
|
|
|
|
function navClassName(active: boolean) {
|
|
return [
|
|
"shrink-0 rounded-sm px-2 py-2 text-[13px] font-medium leading-none whitespace-nowrap no-underline outline-none transition-colors",
|
|
"focus-visible:ring-2 focus-visible:ring-ark-gold/90 focus-visible:ring-offset-2 focus-visible:ring-offset-ark-bg",
|
|
active
|
|
? "text-ark-gold visited:text-ark-gold"
|
|
: "text-[#d7d7dc] visited:text-[#d7d7dc] hover:text-ark-gold",
|
|
].join(" ");
|
|
}
|
|
|
|
export function PublicLayout() {
|
|
const { t, lang, setLang } = useI18n();
|
|
const { pathname, search, hash } = useLocation();
|
|
const [open, setOpen] = useState(false);
|
|
const [q, setQ] = useState("");
|
|
const nav = useNavigate();
|
|
|
|
const na = (which: PublicNavWhich) =>
|
|
navIsActive(pathname, search, hash, which);
|
|
|
|
const goSearch = () => {
|
|
const s = q.trim();
|
|
if (!s) return;
|
|
nav(`/search?q=${encodeURIComponent(s)}`);
|
|
setOpen(false);
|
|
};
|
|
|
|
return (
|
|
<div className="min-h-full flex flex-col pb-20 md:pb-0">
|
|
<header className="sticky top-0 z-40 border-b border-ark-line bg-ark-nav/98 backdrop-blur-md">
|
|
<div className="mx-auto max-w-[1280px] px-4 py-[15px] min-[440px]:px-5 sm:px-6 md:px-9 xl:px-0">
|
|
{/* Single row (md+): logo | scrollable nav (左對齊，可橫向滑動) | 搜尋 + 語言 */}
|
|
<div className="flex h-10 items-center gap-2 min-[1200px]:gap-0 lg:gap-4">
|
|
<Link
|
|
to="/"
|
|
className="flex min-w-0 shrink-0 items-center gap-2.5 rounded-sm text-xl font-bold tracking-wide text-ark-gold outline-none focus-visible:ring-2 focus-visible:ring-ark-gold/80 focus-visible:ring-offset-2 focus-visible:ring-offset-ark-bg"
|
|
>
|
|
<ArkLogoMark className="h-10 w-10 shrink-0" />
|
|
<span className="max-w-[8rem] truncate text-ark-gold sm:inline">
|
|
{t("brand")}
|
|
</span>
|
|
</Link>
|
|
|
|
<nav
|
|
className="header-nav-scroll hidden min-w-0 flex-1 items-center justify-center gap-4 overflow-x-auto overflow-y-hidden py-1 min-[1200px]:flex lg:gap-5"
|
|
aria-label={t("mainNav")}
|
|
>
|
|
<Link
|
|
to="/"
|
|
className={navClassName(na("home"))}
|
|
aria-current={na("home") ? "page" : undefined}
|
|
>
|
|
{t("home")}
|
|
</Link>
|
|
<Link
|
|
to="/browse"
|
|
className={navClassName(na("browseAll"))}
|
|
aria-current={na("browseAll") ? "page" : undefined}
|
|
>
|
|
{t("all")}
|
|
</Link>
|
|
<Link
|
|
to="/#categories"
|
|
className={navClassName(na("categories"))}
|
|
aria-current={na("categories") ? "page" : undefined}
|
|
>
|
|
{t("categories")}
|
|
</Link>
|
|
<Link
|
|
to="/browse?sort=latest"
|
|
className={navClassName(na("browseLatest"))}
|
|
aria-current={na("browseLatest") ? "page" : undefined}
|
|
>
|
|
{t("latest")}
|
|
</Link>
|
|
<Link
|
|
to="/browse?sort=recommended"
|
|
className={navClassName(na("browseRecommended"))}
|
|
aria-current={na("browseRecommended") ? "page" : undefined}
|
|
>
|
|
{t("official")}
|
|
</Link>
|
|
<Link
|
|
to="/browse?sort=popular"
|
|
className={navClassName(na("browsePopular"))}
|
|
aria-current={na("browsePopular") ? "page" : undefined}
|
|
>
|
|
{t("popular")}
|
|
</Link>
|
|
<Link
|
|
to="/wallet"
|
|
className={navClassName(na("wallet"))}
|
|
aria-current={na("wallet") ? "page" : undefined}
|
|
>
|
|
{t("wallet")}
|
|
</Link>
|
|
</nav>
|
|
|
|
<div className="flex min-w-0 flex-1 items-center justify-end gap-2 min-[1200px]:flex-none">
|
|
<div 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">
|
|
<SearchIcon size={16} className="shrink-0 text-[#c6c7cf]" />
|
|
<input
|
|
value={q}
|
|
onChange={(e) => setQ(e.target.value)}
|
|
onKeyDown={(e) => e.key === "Enter" && goSearch()}
|
|
placeholder={t("searchPlaceholder")}
|
|
className="min-w-0 flex-1 rounded-md bg-transparent text-sm text-neutral-200 outline-none placeholder:text-[#777985] focus-visible:ring-2 focus-visible:ring-ark-gold/60 focus-visible:ring-offset-2 focus-visible:ring-offset-[#1a1b20]"
|
|
/>
|
|
</div>
|
|
<div className="hidden h-10 items-center gap-2 rounded-full border border-ark-line bg-[#1a1b20] px-2 py-2 md:flex lg:px-3">
|
|
<Globe
|
|
size={16}
|
|
className="shrink-0 text-ark-gold/80"
|
|
aria-hidden
|
|
/>
|
|
<select
|
|
className="max-w-[6.5rem] cursor-pointer truncate rounded-md bg-transparent text-sm text-neutral-200 outline-none focus:outline-none focus-visible:outline-none focus-visible:ring-0 lg:max-w-none"
|
|
value={lang}
|
|
onChange={(e) => setLang(e.target.value as Lang)}
|
|
aria-label={t("langLabel")}
|
|
>
|
|
<option value="zh-TW">繁體中文</option>
|
|
<option value="zh-CN">简体中文</option>
|
|
<option value="en">English</option>
|
|
</select>
|
|
</div>
|
|
<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"
|
|
onClick={() => setOpen((v) => !v)}
|
|
aria-label="menu"
|
|
>
|
|
{open ? <X size={18} /> : <Menu size={18} />}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{open ? (
|
|
<div className="grid gap-2 border-t border-ark-line bg-ark-nav px-4 py-3 min-[440px]:px-5 sm:px-6 md:px-9 min-[1200px]:hidden">
|
|
<div className="mb-1 flex items-center gap-2 rounded-full border border-ark-line bg-[#1a1b20] px-3 py-2">
|
|
<SearchIcon size={16} className="shrink-0 text-[#c6c7cf]" />
|
|
<input
|
|
value={q}
|
|
onChange={(e) => setQ(e.target.value)}
|
|
onKeyDown={(e) => e.key === "Enter" && goSearch()}
|
|
placeholder={t("searchPlaceholder")}
|
|
className="flex-1 bg-transparent text-sm outline-none placeholder:text-[#777985]"
|
|
/>
|
|
</div>
|
|
<Link
|
|
to="/"
|
|
className={navClassName(na("home"))}
|
|
aria-current={na("home") ? "page" : undefined}
|
|
onClick={() => setOpen(false)}
|
|
>
|
|
{t("home")}
|
|
</Link>
|
|
<Link
|
|
to="/browse"
|
|
className={navClassName(na("browseAll"))}
|
|
aria-current={na("browseAll") ? "page" : undefined}
|
|
onClick={() => setOpen(false)}
|
|
>
|
|
{t("all")}
|
|
</Link>
|
|
<Link
|
|
to="/#categories"
|
|
className={navClassName(na("categories"))}
|
|
aria-current={na("categories") ? "page" : undefined}
|
|
onClick={() => setOpen(false)}
|
|
>
|
|
{t("categories")}
|
|
</Link>
|
|
<Link
|
|
to="/browse?sort=latest"
|
|
className={navClassName(na("browseLatest"))}
|
|
aria-current={na("browseLatest") ? "page" : undefined}
|
|
onClick={() => setOpen(false)}
|
|
>
|
|
{t("latest")}
|
|
</Link>
|
|
<Link
|
|
to="/browse?sort=recommended"
|
|
className={navClassName(na("browseRecommended"))}
|
|
aria-current={na("browseRecommended") ? "page" : undefined}
|
|
onClick={() => setOpen(false)}
|
|
>
|
|
{t("official")}
|
|
</Link>
|
|
<Link
|
|
to="/browse?sort=popular"
|
|
className={navClassName(na("browsePopular"))}
|
|
aria-current={na("browsePopular") ? "page" : undefined}
|
|
onClick={() => setOpen(false)}
|
|
>
|
|
{t("popular")}
|
|
</Link>
|
|
<Link
|
|
to="/wallet"
|
|
className={navClassName(na("wallet"))}
|
|
aria-current={na("wallet") ? "page" : undefined}
|
|
onClick={() => setOpen(false)}
|
|
>
|
|
{t("wallet")}
|
|
</Link>
|
|
<Link
|
|
to="/about"
|
|
className={navClassName(na("about"))}
|
|
aria-current={na("about") ? "page" : undefined}
|
|
onClick={() => setOpen(false)}
|
|
>
|
|
{t("footerAbout")}
|
|
</Link>
|
|
</div>
|
|
) : null}
|
|
</header>
|
|
|
|
<main className="mx-auto w-full max-w-[1280px] flex-1 px-4 py-6 min-[440px]:px-5 sm:px-6 md:px-9 md:py-10 xl:px-0">
|
|
<Outlet />
|
|
</main>
|
|
|
|
<footer className="mt-auto border-t border-ark-line bg-ark-nav/90 mb-20 md:mb-0">
|
|
<div className="mx-auto flex max-w-[1280px] flex-wrap gap-x-6 gap-y-2 px-4 py-6 text-sm text-neutral-400 min-[440px]:px-5 sm:px-6 md:px-9 xl:px-0">
|
|
<Link
|
|
to="/about"
|
|
className="rounded-sm outline-none hover:text-ark-gold2 focus-visible:ring-2 focus-visible:ring-ark-gold/80 focus-visible:ring-offset-2 focus-visible:ring-offset-ark-bg"
|
|
>
|
|
{t("footerAbout")}
|
|
</Link>
|
|
<Link
|
|
to="/wallet"
|
|
className="rounded-sm outline-none hover:text-ark-gold2 focus-visible:ring-2 focus-visible:ring-ark-gold/80 focus-visible:ring-offset-2 focus-visible:ring-offset-ark-bg"
|
|
>
|
|
{t("profile")}
|
|
</Link>
|
|
{import.meta.env.VITE_DISABLE_ADMIN !== "true" ? (
|
|
<Link
|
|
to={`${adminUiPrefix}/login`}
|
|
className="rounded-sm outline-none hover:text-ark-gold2 focus-visible:ring-2 focus-visible:ring-ark-gold/80 focus-visible:ring-offset-2 focus-visible:ring-offset-ark-bg"
|
|
>
|
|
{t("footerAdminLogin")}
|
|
</Link>
|
|
) : null}
|
|
</div>
|
|
</footer>
|
|
|
|
<nav className="md:hidden fixed bottom-0 inset-x-0 z-40 border-t border-ark-line bg-ark-nav/95 backdrop-blur">
|
|
<div className="grid grid-cols-4 gap-1 px-1 py-2 text-center text-[11px]">
|
|
<BottomNavIcon
|
|
to="/"
|
|
label={t("home")}
|
|
icon="home"
|
|
active={pathname === "/"}
|
|
/>
|
|
<BottomNavIcon
|
|
to="/browse"
|
|
label={t("all")}
|
|
icon="document"
|
|
active={
|
|
pathname === "/browse" && !new URLSearchParams(search).get("sort")
|
|
}
|
|
/>
|
|
<BottomNavIcon
|
|
to="/wallet"
|
|
label={t("wallet")}
|
|
icon="profile"
|
|
active={pathname === "/wallet"}
|
|
/>
|
|
<BottomNavIcon
|
|
to="/browse?sort=latest"
|
|
label={t("latest")}
|
|
icon="update"
|
|
active={
|
|
pathname === "/browse" &&
|
|
new URLSearchParams(search).get("sort") === "latest"
|
|
}
|
|
/>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const NAVBAR_ICON_BASE = "/assets/ark-library/navbar";
|
|
|
|
function BottomNavIcon({
|
|
to,
|
|
label,
|
|
icon,
|
|
active,
|
|
}: {
|
|
to: string;
|
|
label: string;
|
|
icon: "home" | "document" | "profile" | "update";
|
|
active: boolean;
|
|
}) {
|
|
const src = active
|
|
? `${NAVBAR_ICON_BASE}/${icon}-active.svg`
|
|
: `${NAVBAR_ICON_BASE}/${icon}-inactive.svg`;
|
|
return (
|
|
<Link
|
|
to={to}
|
|
className={[
|
|
"flex flex-col items-center gap-1 rounded-lg py-1 outline-none focus-visible:ring-2 focus-visible:ring-ark-gold/80 focus-visible:ring-offset-2 focus-visible:ring-offset-ark-bg",
|
|
active ? "text-ark-gold" : "text-neutral-400",
|
|
].join(" ")}
|
|
>
|
|
<img
|
|
src={src}
|
|
alt=""
|
|
className={[
|
|
"mx-auto h-7 w-7 object-contain",
|
|
active ? "opacity-100" : "opacity-55",
|
|
].join(" ")}
|
|
width={28}
|
|
height={28}
|
|
loading="lazy"
|
|
decoding="async"
|
|
/>
|
|
<span className="leading-tight">{label}</span>
|
|
</Link>
|
|
);
|
|
}
|