File size: 3,073 Bytes
ec8acdf | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 | import { ArrowRight, ChevronDown, Menu as MenuIcon } from 'lucide-react';
import { Logo } from '../components/Logo';
import { t } from '../i18n';
import { DASHBOARD_PATH } from '../routes';
const TABLET_MENU_ID = 'welcome-tablet-navigation';
const NAV_ITEMS = [
{ href: '#moments', labelKey: 'welcome.nav.useCases', accent: false },
{ href: '#first-five', labelKey: 'welcome.nav.firstFive', accent: false },
{ href: '#depth', labelKey: 'welcome.nav.depth', accent: false },
{ href: '/pro#pricing', labelKey: 'welcome.nav.pricing', accent: true },
{ href: '#faq', labelKey: 'welcome.nav.faq', accent: false },
{ href: '/blog/', labelKey: 'welcome.nav.blog', accent: false },
{ href: 'https://www.worldmonitor.app/docs', labelKey: 'welcome.nav.docs', accent: false },
] as const;
const NavItems = ({ compact = false }: { compact?: boolean }) => (
<>
{NAV_ITEMS.map(({ href, labelKey, accent }) => (
<a
key={href}
href={href}
className={compact
? `block px-4 py-2.5 hover:bg-white/5 transition-colors ${accent ? 'text-wm-green' : 'hover:text-wm-text'}`
: `transition-colors ${accent ? 'hover:text-wm-green' : 'hover:text-wm-text'}`}
onClick={compact
? () => document.getElementById(TABLET_MENU_ID)?.removeAttribute('open')
: undefined}
>
{t(labelKey)}
</a>
))}
</>
);
export const Nav = () => (
<nav className="fixed top-0 left-0 right-0 z-50 glass-panel border-b-0 border-x-0 rounded-none" aria-label="Main navigation">
<div className="max-w-7xl mx-auto px-4 sm:px-6 h-16 flex items-center justify-between gap-3">
<Logo />
<div className="hidden lg:flex items-center gap-8 text-sm font-mono text-wm-muted">
<NavItems />
</div>
<details id={TABLET_MENU_ID} className="group relative hidden md:block lg:hidden text-sm font-mono text-wm-muted">
<summary className="list-none cursor-pointer border border-wm-border bg-wm-card px-3 py-2 rounded-sm inline-flex items-center gap-2 hover:text-wm-text transition-colors [&::-webkit-details-marker]:hidden">
<MenuIcon className="w-4 h-4" aria-hidden="true" />
{t('welcome.nav.menu')}
<ChevronDown className="w-3 h-3 transition-transform group-open:rotate-180" aria-hidden="true" />
</summary>
<div className="absolute right-0 top-[calc(100%+0.5rem)] z-10 w-52 border border-wm-border bg-wm-card shadow-xl py-1">
<NavItems compact />
</div>
</details>
<a
href={`${DASHBOARD_PATH}?ref=welcome-nav`}
data-umami-event="welcome-cta"
data-umami-event-target="welcome-nav"
aria-label={t('welcome.nav.launch')}
className="shrink-0 bg-wm-green text-wm-bg px-3 sm:px-4 py-2 rounded-sm font-mono text-xs uppercase tracking-wide sm:tracking-wider font-bold hover:bg-green-400 transition-colors inline-flex items-center gap-1.5"
>
{t('welcome.nav.launch')} <ArrowRight className="w-3 h-3" aria-hidden="true" />
</a>
</div>
</nav>
);
|