@amsterdam/design-system-react
Version:
All React components from the Amsterdam Design System. Use it to compose pages in your website or application.
37 lines (36 loc) • 4.25 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { clsx } from 'clsx';
import { forwardRef, useEffect, useId, useState } from 'react';
import useViewportHasMinWidth from '../common/useViewportHasMinWidth';
import { Icon } from '../Icon';
import { LogoLinkContent } from './LogoLinkContent';
import { PageHeaderGridCellNarrowWindowOnly } from './PageHeaderGridCellNarrowWindowOnly';
import { PageHeaderMenuIcon } from './PageHeaderMenuIcon';
import { PageHeaderMenuLink } from './PageHeaderMenuLink';
const PageHeaderRoot = forwardRef(({ brandName, brandNameShort, children, className, logoAccessibleName, logoBrand = 'amsterdam', logoLink = '/', logoLinkComponent = (props) => _jsx("a", { ...props }), logoLinkTitle, menuButtonIcon, menuButtonText = 'Menu', menuButtonTextForHide = 'Verberg navigatiemenu', menuButtonTextForShow = 'Laat navigatiemenu zien', menuItems, navigationLabel = 'Hoofdmenu', noMenuButtonOnWideWindow, ...restProps }, ref) => {
const [open, setOpen] = useState(false);
const viewportHasMinWidth = useViewportHasMinWidth('wide');
const accessibleLabelId = useId();
const hasMegaMenu = Boolean(children);
const hasMegaMenuOnWideWindow = hasMegaMenu && viewportHasMinWidth;
const LogoLink = logoLinkComponent;
// Use short brand name if no full brand name is (invalidly) provided
const brandNameFullOrShort = brandName || brandNameShort;
const logoLinkContentProps = { brandNameFullOrShort, brandNameShort, logoAccessibleName, logoBrand };
useEffect(() => {
// Close the menu when the menu button disappears
if (noMenuButtonOnWideWindow && hasMegaMenuOnWideWindow) {
setOpen(false);
}
}, [hasMegaMenuOnWideWindow, noMenuButtonOnWideWindow]);
return (_jsxs("header", { ...restProps, className: clsx('ams-page-header', className), ref: ref, children: [_jsxs(LogoLink, { className: "ams-page-header__logo-link", href: logoLink, children: [_jsx(LogoLinkContent, { ...logoLinkContentProps }), _jsx("span", { className: "ams-visually-hidden", children: logoLinkTitle ?? `Ga naar de homepage${brandNameFullOrShort ? ' van ' + brandNameFullOrShort : ''}` })] }), (hasMegaMenu || menuItems) && (_jsxs("nav", { "aria-labelledby": accessibleLabelId, className: "ams-page-header__navigation", children: [_jsx("h2", { "aria-hidden": true, className: "ams-visually-hidden", id: accessibleLabelId, children: navigationLabel }), _jsx("div", { "aria-hidden": true, className: "ams-page-header__logo-link ams-page-header__logo-link--hidden", hidden: true, children: _jsx(LogoLinkContent, { ...logoLinkContentProps, logoAccessibleName: undefined }) }), _jsxs("ul", { className: "ams-page-header__menu", children: [menuItems, hasMegaMenu && (_jsx("li", { className: clsx('ams-page-header__mega-menu-button-item', noMenuButtonOnWideWindow && 'ams-page-header__mega-menu-button-item--hide-on-wide-window'), hidden // Hide the list item containing the menu button until its CSS loads. If it doesn't load, the menu will always be visible.
: true, children: _jsxs("button", { "aria-controls": "ams-page-header-mega-menu", "aria-expanded": open, className: "ams-page-header__mega-menu-button", onClick: () => setOpen(!open), type: "button", children: [_jsx("span", { "aria-hidden": "true", className: "ams-page-header__mega-menu-button-label", children: menuButtonText }), _jsx("span", { className: "ams-visually-hidden", children: open ? menuButtonTextForHide : menuButtonTextForShow }), _jsx(Icon, { svg: menuButtonIcon ?? (_jsx(PageHeaderMenuIcon, { className: clsx('ams-page-header__menu-icon', open && 'ams-page-header__menu-icon--open') })) })] }) }))] }), hasMegaMenu && (_jsx("div", { className: clsx('ams-page-header__mega-menu', !open && 'ams-page-header__mega-menu--closed'), id: "ams-page-header-mega-menu", children: children }))] }))] }));
});
PageHeaderRoot.displayName = 'PageHeader';
/**
* @see {@link https://designsystem.amsterdam/?path=/docs/components-containers-page-header--docs Page Header docs at Amsterdam Design System}
*/
export const PageHeader = Object.assign(PageHeaderRoot, {
GridCellNarrowWindowOnly: PageHeaderGridCellNarrowWindowOnly,
MenuLink: PageHeaderMenuLink,
});