167 lines
6.8 KiB
TypeScript
167 lines
6.8 KiB
TypeScript
"use client";
|
|
|
|
import { memo } from "react";
|
|
import Script from "next/script";
|
|
import { useTranslation } from "../../../contexts/MessagesContext";
|
|
import { ASSETS, getAssetPath } from "../../../../lib/assetUtils";
|
|
import Menu from "../Menu";
|
|
import type { TopViewProps } from "./Top.types";
|
|
|
|
import Logo from "../../asset/Logo";
|
|
|
|
function TopView({
|
|
folderTop,
|
|
loggedIn: _loggedIn,
|
|
profile: _profile,
|
|
logIn,
|
|
schemaData,
|
|
logoSize,
|
|
renderNavigationItems,
|
|
renderLoginButton,
|
|
renderCreateRuleButton,
|
|
}: TopViewProps) {
|
|
const t = useTranslation(folderTop ? "homeHeader" : "header");
|
|
|
|
const loginControl = logIn ? (
|
|
<Menu size="X Small" className="lg:gap-[var(--space-300)]">
|
|
{renderLoginButton()}
|
|
</Menu>
|
|
) : null;
|
|
|
|
if (folderTop) {
|
|
return (
|
|
<>
|
|
<Script
|
|
id="top-navigation-schema"
|
|
type="application/ld+json"
|
|
dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaData) }}
|
|
/>
|
|
<header
|
|
className="w-full overflow-visible bg-transparent"
|
|
role="banner"
|
|
aria-label={t("ariaLabels.homePageNavigationHeader")}
|
|
>
|
|
<nav
|
|
className="relative mx-auto flex h-[50px] items-end justify-between pl-[var(--space-200)] pr-[var(--space-400)] pt-[var(--space-250)] sm:h-[62px] sm:px-[var(--space-250)] sm:pr-[var(--space-500)] sm:pt-[var(--space-250)] md:h-[68px] md:px-[var(--space-400)] md:pr-[var(--space-800)] md:pt-[var(--space-400)] lg:h-[68px] lg:pl-[var(--space-600)] lg:pr-[var(--space-1400)] lg:pt-[var(--space-400)] xl:h-[88px] xl:pl-[var(--space-1200)] xl:pr-[var(--space-1400)] xl:pt-[var(--space-600)]"
|
|
role="navigation"
|
|
aria-label={t("ariaLabels.mainNavigation")}
|
|
>
|
|
<div className="HeaderTab header-breakpoint-transition relative flex h-[var(--space-1000)] w-fit min-w-0 items-center self-end overflow-visible rounded-tl-[var(--radius-400)] rounded-tr-[var(--radius-400)] bg-[var(--color-surface-invert-brand-primary)] pl-[var(--space-300)] pr-[var(--space-300)] sm:mr-[var(--space-200)] sm:h-[52px] sm:w-auto sm:flex-1 sm:rounded-t-[var(--radius-500)] sm:pr-[var(--space-150)] md:h-[52px] md:min-w-0 md:rounded-t-[var(--radius-500)] md:pl-[var(--space-600)] md:pr-[var(--space-300)] lg:mr-[var(--space-600)] lg:h-[52px] lg:rounded-t-[var(--radius-500)] lg:pl-[var(--space-600)] lg:pr-[var(--space-1200)] xl:mr-[var(--space-800)] xl:h-[64px] xl:rounded-t-[var(--radius-500)] xl:pl-[var(--space-800)] xl:pr-[var(--space-3000)]">
|
|
<div className="relative z-[1] shrink-0">
|
|
<Logo
|
|
size={logoSize}
|
|
wordmark
|
|
palette={folderTop ? "inverse" : "default"}
|
|
/>
|
|
</div>
|
|
|
|
<div
|
|
className="relative z-[1] shrink-0 md:absolute md:top-1/2 md:left-[calc(50vw-var(--space-400))] md:-translate-x-1/2 md:-translate-y-1/2 lg:left-[calc(50vw-var(--space-600))] xl:left-[calc(50vw-var(--space-1200))]"
|
|
data-top="nav"
|
|
>
|
|
<Menu
|
|
size="X Small"
|
|
className="md:gap-[var(--space-100)] lg:gap-[var(--space-300)]"
|
|
>
|
|
{renderNavigationItems()}
|
|
</Menu>
|
|
</div>
|
|
|
|
{/* eslint-disable-next-line @next/next/no-img-element -- decorative SVG, not content */}
|
|
<img
|
|
src={getAssetPath(ASSETS.UNION_XSM)}
|
|
alt=""
|
|
role="presentation"
|
|
className="pointer-events-none absolute -bottom-[3px] -right-[52px] z-0 h-[24px] w-[61px] sm:hidden sm:h-[31.5px] sm:w-[61px]"
|
|
/>
|
|
{/* eslint-disable-next-line @next/next/no-img-element -- decorative SVG */}
|
|
<img
|
|
src={getAssetPath(ASSETS.UNION_SM_MD_LG)}
|
|
alt=""
|
|
role="presentation"
|
|
className="pointer-events-none absolute -bottom-[3.7px] -right-[53px] z-0 hidden h-[24px] w-[61px] sm:block sm:h-[31.5px] sm:w-[61px] xl:hidden"
|
|
/>
|
|
{/* eslint-disable-next-line @next/next/no-img-element -- decorative SVG */}
|
|
<img
|
|
src={getAssetPath(ASSETS.UNION_XLG)}
|
|
alt=""
|
|
role="presentation"
|
|
className="pointer-events-none absolute -bottom-[6px] -right-[94px] z-0 hidden h-[53px] w-[105px] xl:block"
|
|
/>
|
|
</div>
|
|
|
|
<div
|
|
className="flex shrink-0 items-center gap-[var(--space-100)] self-center md:gap-[var(--space-250)]"
|
|
data-top="auth"
|
|
>
|
|
{loginControl}
|
|
{renderCreateRuleButton()}
|
|
</div>
|
|
</nav>
|
|
</header>
|
|
</>
|
|
);
|
|
}
|
|
|
|
/**
|
|
* Standard marketing / app top nav.
|
|
* Figma: "Navigation / Top" (Community-Rule-System, node 22078-808559).
|
|
* Below md: auto | 1fr | auto so the logo cannot paint over the cluster.
|
|
* From md: 1fr | auto | 1fr so the cluster sits on the same page midline
|
|
* as Folder-top (Create rule is wider than the logo, so a leftover-column
|
|
* center sits off-center).
|
|
*/
|
|
return (
|
|
<>
|
|
<script
|
|
type="application/ld+json"
|
|
dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaData) }}
|
|
/>
|
|
<header
|
|
className="relative z-50 w-full border-b border-[var(--border-color-default-tertiary)] bg-[var(--color-surface-default-primary)]"
|
|
role="banner"
|
|
aria-label={t("ariaLabels.mainNavigationHeader")}
|
|
>
|
|
<nav
|
|
className="grid w-full grid-cols-[auto_minmax(0,1fr)_auto] items-center px-[var(--space-400)] py-[var(--space-200)] sm:px-[var(--space-400)] md:grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] lg:px-[var(--space-1800)] lg:py-[var(--space-400)]"
|
|
role="navigation"
|
|
aria-label={t("ariaLabels.mainNavigation")}
|
|
>
|
|
<div className="min-w-0 shrink-0 justify-self-start lg:w-[200px] lg:max-w-[200px]" data-top="logo">
|
|
<Logo
|
|
size={logoSize}
|
|
wordmark
|
|
palette={folderTop ? "inverse" : "default"}
|
|
/>
|
|
</div>
|
|
|
|
<div
|
|
className="flex min-w-0 items-center justify-end md:justify-center"
|
|
data-top="nav"
|
|
>
|
|
<Menu
|
|
size="X Small"
|
|
className="min-w-0 lg:gap-[var(--space-300)]"
|
|
>
|
|
{renderNavigationItems()}
|
|
</Menu>
|
|
</div>
|
|
|
|
<div
|
|
className="flex shrink-0 items-center justify-self-end gap-[var(--space-100)] md:gap-[var(--space-250)] lg:gap-[var(--space-100)]"
|
|
data-top="auth"
|
|
>
|
|
{loginControl}
|
|
{renderCreateRuleButton()}
|
|
</div>
|
|
</nav>
|
|
</header>
|
|
</>
|
|
);
|
|
}
|
|
|
|
TopView.displayName = "TopView";
|
|
|
|
export default memo(TopView);
|
|
export { TopView };
|