90 lines
3.2 KiB
TypeScript
90 lines
3.2 KiB
TypeScript
'use client';
|
|
|
|
import Link from 'next/link';
|
|
import { useEffect, useRef } from 'react';
|
|
|
|
const i18n = {
|
|
en: { home: 'Home', docs: 'Docs', changelog: 'Changelog', community: 'Community', lang: '中文' },
|
|
cn: { home: '首页', docs: '文档', changelog: '更新日志', community: '交流群', lang: 'English' },
|
|
};
|
|
|
|
export function LandingNav({
|
|
lang,
|
|
active,
|
|
}: {
|
|
lang: 'en' | 'cn';
|
|
active?: 'home' | 'changelog' | 'community';
|
|
}) {
|
|
const ref = useRef<HTMLElement>(null);
|
|
const t = i18n[lang];
|
|
const otherLang = lang === 'cn' ? 'en' : 'cn';
|
|
const langHrefMap: Record<string, string> = {
|
|
changelog: `/${otherLang}/changelog`,
|
|
community: `/${otherLang}/community`,
|
|
};
|
|
const langHref = langHrefMap[active ?? ''] ?? `/${otherLang}`;
|
|
|
|
useEffect(() => {
|
|
const node = ref.current;
|
|
if (!node) return;
|
|
|
|
function onScroll() {
|
|
node!.classList.toggle('is-scrolled', window.scrollY > 60);
|
|
}
|
|
|
|
onScroll();
|
|
window.addEventListener('scroll', onScroll, { passive: true });
|
|
return () => window.removeEventListener('scroll', onScroll);
|
|
}, []);
|
|
|
|
return (
|
|
<nav ref={ref} className="landing-nav">
|
|
<div className="flex items-center justify-between max-w-[1180px] h-16 mx-auto px-7 max-[760px]:min-h-[58px] max-[760px]:h-auto max-[760px]:px-[18px] max-[760px]:py-2.5">
|
|
<Link href={`/${lang}`} className="flex items-center gap-2.5 text-landing-ink text-2xl font-[820]">
|
|
<img src="/logo.png" alt="DBX" width={28} height={28} />
|
|
<span>DBX</span>
|
|
</Link>
|
|
<div className="flex items-center gap-1">
|
|
<Link
|
|
href={`/${lang}`}
|
|
className={`landing-nav-link rounded-[7px] px-[11px] py-2 text-[13px] font-medium max-[760px]:hidden ${active === 'home' ? 'text-landing-ink' : 'text-landing-muted'}`}
|
|
>
|
|
{t.home}
|
|
</Link>
|
|
<Link
|
|
href={`/${lang}/docs/what-is-dbx`}
|
|
className="landing-nav-link rounded-[7px] px-[11px] py-2 text-[13px] font-medium max-[760px]:hidden text-landing-muted"
|
|
>
|
|
{t.docs}
|
|
</Link>
|
|
<Link
|
|
href={`/${lang}/changelog`}
|
|
className={`landing-nav-link rounded-[7px] px-[11px] py-2 text-[13px] font-medium max-[760px]:hidden ${active === 'changelog' ? 'text-landing-ink' : 'text-landing-muted'}`}
|
|
>
|
|
{t.changelog}
|
|
</Link>
|
|
<Link
|
|
href={`/${lang}/community`}
|
|
className={`landing-nav-link rounded-[7px] px-[11px] py-2 text-[13px] font-medium max-[760px]:hidden ${active === 'community' ? 'text-landing-ink' : 'text-landing-muted'}`}
|
|
>
|
|
{t.community}
|
|
</Link>
|
|
<Link
|
|
href="https://github.com/t8y2/dbx"
|
|
target="_blank"
|
|
className="landing-nav-link rounded-[7px] px-[11px] py-2 text-landing-muted text-[13px] font-medium max-[760px]:hidden"
|
|
>
|
|
GitHub
|
|
</Link>
|
|
<Link
|
|
href={langHref}
|
|
className="landing-nav-link rounded-[7px] px-[11px] py-2 text-landing-muted text-[13px] font-medium ml-1.5 border border-landing-line"
|
|
>
|
|
{t.lang}
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
);
|
|
}
|