| 1 | import Link from "next/link"; |
| 2 | import type { Locale } from "@/lib/i18n/config"; |
| 3 | import { getChrome } from "@/lib/i18n/dictionaries"; |
| 4 | import { navLinks, secondaryNavLinks, REPO_URL, APP_LOGIN_URL } from "@/lib/i18n/links"; |
| 5 | import { Icon } from "./icon"; |
| 6 | import { LocaleSwitcher } from "./locale-switcher"; |
| 7 | import { MobileMenu } from "./mobile-menu"; |
| 8 | import { NavLinks } from "./nav-links"; |
| 9 | import { ThemeToggle } from "./theme-toggle"; |
| 10 | import { WhalePose } from "./whale-pose"; |
| 11 | import { ArrowLabel } from "./arrow-label"; |
| 12 | |
| 13 | /** |
| 14 | * Masthead + primary nav. Like the GPUI titlebar it carries few visible |
| 15 | * controls: the whale and the wordmark, four links, quiet icon controls |
| 16 | * with accessible names, one identity door (Sign in; the sign-in page |
| 17 | * offers account creation) and the one primary action, Install. |
| 18 | */ |
| 19 | export function Nav({ locale = "en" }: { locale?: Locale }) { |
| 20 | const chrome = getChrome(locale); |
| 21 | const links = navLinks(locale, chrome); |
| 22 | const moreLinks = secondaryNavLinks(locale, chrome); |
| 23 | const homeHref = `/${locale}`; |
| 24 | |
| 25 | return ( |
| 26 | <header className="site-nav paper-nav"> |
| 27 | <div className="site-nav-inner paper-nav-inner"> |
| 28 | <Link href={homeHref} className="site-wordmark paper-wordmark" aria-label={chrome.navHomeAria}> |
| 29 | <div className="paper-wordmark-text"> |
| 30 | <WhalePose pose="rest" className="paper-wordmark-mark" priority /> |
| 31 | {/* The wordmark is one ink, drawn through a CSS mask so both |
| 32 | appearances re-ink it; the link carries the name. */} |
| 33 | <span className="paper-wordmark-logo" aria-hidden="true" /> |
| 34 | </div> |
| 35 | </Link> |
| 36 | |
| 37 | <NavLinks links={links} primaryAria={chrome.navPrimaryAria} /> |
| 38 | |
| 39 | <div className="site-nav-actions"> |
| 40 | <ThemeToggle |
| 41 | autoLabel={chrome.themeAuto} |
| 42 | lightLabel={chrome.themeLight} |
| 43 | darkLabel={chrome.themeDark} |
| 44 | ariaTemplate={chrome.themeAria} |
| 45 | titleLabel={chrome.themeTitle} |
| 46 | /> |
| 47 | <LocaleSwitcher current={locale} /> |
| 48 | <Link href={REPO_URL} className="nav-icon-button site-github-link" aria-label="GitHub" title="GitHub"> |
| 49 | <Icon name="github" className="nav-icon" /> |
| 50 | </Link> |
| 51 | <Link href={APP_LOGIN_URL} className="paper-auth-signin hidden lg:inline-flex" data-usage="login"> |
| 52 | {chrome.authSignIn} |
| 53 | </Link> |
| 54 | <Link |
| 55 | href={`/${locale}/install`} |
| 56 | className="paper-install-cta hidden lg:inline-flex" |
| 57 | > |
| 58 | <ArrowLabel text={chrome.installCta} /> |
| 59 | </Link> |
| 60 | <MobileMenu |
| 61 | installHref={`/${locale}/install`} |
| 62 | installLabel={chrome.installCta} |
| 63 | signInHref={APP_LOGIN_URL} |
| 64 | signInLabel={chrome.authSignIn} |
| 65 | links={links} |
| 66 | moreLinks={moreLinks} |
| 67 | openLabel={chrome.menuOpen} |
| 68 | closeLabel={chrome.menuClose} |
| 69 | navAria={chrome.navPrimaryAria} |
| 70 | /> |
| 71 | </div> |
| 72 | </div> |
| 73 | </header> |
| 74 | ); |
| 75 | } |
| 76 |