@amsterdam/design-system-react/dist/Header/Header.js

All React components from the Amsterdam Design System. Use it to compose pages in your website or application.

import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
/**
 * @license EUPL-1.2+
 * Copyright Gemeente Amsterdam
 */
import clsx from 'clsx';
import { forwardRef, useEffect, useState } from 'react';
import { Icon } from '../Icon';
import { Logo } from '../Logo';
import { HeaderGridCellNarrowWindowOnly } from './HeaderGridCellNarrowWindowOnly';
import { HeaderMenuIcon } from './HeaderMenuIcon';
import { HeaderMenuLink } from './HeaderMenuLink';
import useIsAfterBreakpoint from '../common/useIsAfterBreakpoint';
const LogoLinkContent = ({ brandName, logoBrand }) => (_jsxs(_Fragment, { children: [_jsx("span", { className: clsx(logoBrand === 'amsterdam' && Boolean(brandName) && 'ams-header__logo-container'), children: _jsx(Logo, { brand: logoBrand }) }), brandName && (_jsx("span", { "aria-hidden": "true", className: "ams-header__brand-name", children: brandName }))] }));
const HeaderRoot = forwardRef(({ brandName, children, className, logoBrand = 'amsterdam', logoLink = '/', logoLinkTitle = 'Ga naar de homepage', menuButtonText = 'Menu', menuItems, navigationLabel = 'Hoofdnavigatie', noMenuButtonOnWideWindow, ...restProps }, ref) => {
    const [open, setOpen] = useState(false);
    const hasMegaMenu = Boolean(children);
    const isWideWindow = hasMegaMenu && useIsAfterBreakpoint('wide');
    useEffect(() => {
        // Close the menu when the menu button disappears
        if (noMenuButtonOnWideWindow && isWideWindow) {
            setOpen(false);
        }
    }, [isWideWindow]);
    return (_jsxs("header", { ...restProps, className: clsx('ams-header', className), ref: ref, children: [_jsxs("a", { className: "ams-header__logo-link", href: logoLink, children: [_jsx("span", { className: "ams-visually-hidden", children: logoLinkTitle }), _jsx(LogoLinkContent, { brandName: brandName, logoBrand: logoBrand })] }), (hasMegaMenu || menuItems) && (_jsxs("nav", { "aria-labelledby": "primary-navigation", className: "ams-header__navigation", children: [_jsx("h2", { className: "ams-visually-hidden", id: "primary-navigation", children: navigationLabel }), _jsx("div", { className: "ams-header__logo-link ams-header__logo-link--hidden", children: _jsx(LogoLinkContent, { brandName: brandName, logoBrand: logoBrand }) }), _jsxs("ul", { className: "ams-header__menu", children: [menuItems, hasMegaMenu && (_jsx("li", { className: clsx(noMenuButtonOnWideWindow && 'ams-header__mega-menu-button-item--hide-on-wide-window'), children: _jsxs("button", { ...restProps, "aria-controls": "ams-mega-menu", "aria-expanded": open, className: "ams-header__mega-menu-button", onClick: () => setOpen(!open), type: "button", children: [_jsx("span", { className: "ams-header__mega-menu-button-label", children: menuButtonText }), _jsx("span", { "aria-hidden": "true", className: "ams-header__mega-menu-button-hidden-label", children: menuButtonText }), _jsx(Icon, { svg: _jsx(HeaderMenuIcon, { className: clsx('ams-header__menu-icon', open && 'ams-header__menu-icon--open') }) })] }) }))] }), hasMegaMenu && (_jsx("div", { className: clsx('ams-header__mega-menu', !open && 'ams-header__mega-menu--closed'), id: "ams-mega-menu", children: children }))] }))] }));
});
HeaderRoot.displayName = 'Header';
export const Header = Object.assign(HeaderRoot, {
    GridCellNarrowWindowOnly: HeaderGridCellNarrowWindowOnly,
    MenuLink: HeaderMenuLink,
});