56 lines
1.3 KiB
TypeScript
56 lines
1.3 KiB
TypeScript
import { ModalToggler } from '@faceless-ui/modal';
|
|
import Link from 'next/link';
|
|
import React from 'react';
|
|
import { useGlobals } from '../../providers/Globals';
|
|
import { Gutter } from '../Gutter';
|
|
import { MenuIcon } from '../icons/Menu';
|
|
import { CMSLink } from '../Link';
|
|
import { Logo } from '../Logo';
|
|
import { MobileMenuModal, slug as menuModalSlug } from './MobileMenuModal';
|
|
|
|
import classes from './index.module.scss';
|
|
|
|
type HeaderBarProps = {
|
|
children?: React.ReactNode;
|
|
}
|
|
|
|
export const HeaderBar: React.FC<HeaderBarProps> = ({ children }) => {
|
|
return (
|
|
<header className={classes.header}>
|
|
<Gutter className={classes.wrap}>
|
|
<Link href="/">
|
|
<a>
|
|
<Logo />
|
|
</a>
|
|
</Link>
|
|
|
|
{children}
|
|
|
|
<ModalToggler slug={menuModalSlug} className={classes.mobileMenuToggler}>
|
|
<MenuIcon />
|
|
</ModalToggler>
|
|
</Gutter>
|
|
</header>
|
|
)
|
|
}
|
|
|
|
export const Header: React.FC = () => {
|
|
const { mainMenu: { navItems } } = useGlobals();
|
|
|
|
return (
|
|
<>
|
|
<HeaderBar>
|
|
<nav className={classes.nav}>
|
|
{navItems.map(({ link }, i) => {
|
|
return (
|
|
<CMSLink key={i} {...link} />
|
|
)
|
|
})}
|
|
</nav>
|
|
</HeaderBar>
|
|
|
|
<MobileMenuModal navItems={navItems} />
|
|
</>
|
|
)
|
|
}
|