const TopBar = ({ route = "overview", onRoute }) => { const isMobile = useIsMobile(); const nav = [ { key: "overview", zh: "總覽", jp: "ダッシュボード", href: "/home.html" }, { key: "products", zh: "商品", jp: "商品一覧", href: "/products/", hasSubmenu: true }, { key: "popup", zh: "Pop-up", jp: "期間限定店", href: "/popup/" }, { key: "about", zh: "About", jp: "について", href: "/about/" }, ]; // Sub-menu for 商品 — grouped by series const productGroups = [ { label_zh: "擴充包", label_jp: "拡張パック", items: [ { slug: "ninja-spinner", zh: "忍者飛旋", jp: "ニンジャスピナー", release: "2026-03-13", badge: "即將發售" }, { slug: "mega-brave", zh: "超級勇氣", jp: "メガブレイブ", release: "2025-08-01" }, { slug: "mega-symphonia", zh: "超級交響樂",jp: "メガシンフォニア", release: "2025-08-01" }, { slug: "battle-partners",zh: "對戰搭檔", jp: "バトルパートナーズ", release: "2025-01-24" }, { slug: "crimson-haze", zh: "緋紅薄霧", jp: "クリムゾンヘイズ", release: "2024-03-22" }, ], }, { label_zh: "挑戰牌組", label_jp: "スターターセット", items: [ { slug: "start-deck-ex-2026", zh: "超級 ex 挑戰牌組", jp: "スターターセット MEGA", release: "2025-08-01" }, ], }, ]; // Submenu — desktop: hover opens, click-when-open navigates (two-tap pattern). const [submenuOpen, setSubmenuOpen] = React.useState(false); // Mobile drawer — hamburger host const [drawerOpen, setDrawerOpen] = React.useState(false); // Mobile drawer: products accordion — first tap expands, second tap on 商品 navigates. const [productsExpanded, setProductsExpanded] = React.useState(false); React.useEffect(() => { if (!isMobile) { setDrawerOpen(false); setProductsExpanded(false); } else setSubmenuOpen(false); }, [isMobile]); // MVP: fake refresh — spin 1.2s, then bump lastScraped to now + toast. // Persisted via localStorage so navigating between pages preserves it. const LS_KEY = "ptcg.lastScraped"; const DEFAULT_SCRAPED = "2026-04-22T04:15:00+09:00"; const [lastScraped, setLastScrapedState] = React.useState(() => { try { const saved = localStorage.getItem(LS_KEY); return new Date(saved || DEFAULT_SCRAPED); } catch { return new Date(DEFAULT_SCRAPED); } }); const setLastScraped = (d) => { setLastScrapedState(d); try { localStorage.setItem(LS_KEY, d.toISOString()); } catch (_) {} }; const [refreshing, setRefreshing] = React.useState(false); const [toast, setToast] = React.useState(null); const fmtJST = React.useCallback((d) => { const parts = new Intl.DateTimeFormat("ja-JP", { timeZone: "Asia/Tokyo", year: "numeric", month: "2-digit", day: "2-digit", hour: "2-digit", minute: "2-digit", hour12: false, }).formatToParts(d).reduce((a, p) => (a[p.type] = p.value, a), {}); return `${parts.year}-${parts.month}-${parts.day} ${parts.hour}:${parts.minute}`; }, []); const handleRefresh = () => { if (refreshing) return; setRefreshing(true); setTimeout(() => { setLastScraped(new Date()); setRefreshing(false); setToast("已同步 · 剛剛"); setTimeout(() => setToast(null), 2200); }, 1200); }; // --- Shared styles --- const navBtnStyle = (active) => ({ background: active ? "var(--ink-50)" : "transparent", color: active ? "var(--fg-1)" : "var(--fg-2)", border: "none", padding: "6px 12px", borderRadius: 6, font: "500 13px/1 var(--font-body)", cursor: "pointer", display: "flex", alignItems: "baseline", gap: 6, transition: "background 120ms", textDecoration: "none", }); // --- Mobile drawer contents (same submenu data) --- const MobileDrawer = () => ( <> {/* scrim */}
setDrawerOpen(false)} style={{ position: "fixed", inset: 0, zIndex: 1800, background: "rgba(17, 17, 17, 0.45)", animation: "tb-scrim-in 160ms var(--ease-out)", }}/> {/* panel */}
選單
); return ( <>
{/* Logo — compact on mobile */}
ポケカ情報 {!isMobile && ( PTCG Dashboard )} {!isMobile && ( )} {/* Right cluster — desktop only */} {!isMobile && (
最後更新 · Last scraped {fmtJST(lastScraped)} JST
)} {/* Hamburger — mobile only */} {isMobile && ( )}
{/* Mobile drawer */} {isMobile && drawerOpen && } {/* Toast — anchored under topbar, auto-fades */} {toast && (
● {toast}
)} ); }; window.TopBar = TopBar;