src/components/organisms/layout/header.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

import Branding, {
  type BrandingProps,
} from '@components/molecules/layout/branding';
import { FC } from 'react';
import Toolbar, { type ToolbarProps } from '../toolbar/toolbar';
import styles from './header.module.scss';

export type HeaderProps = BrandingProps & {
  /**
   * Set additional classnames to the header element.
   */
  className?: string;
  /**
   * The main nav items.
   */
  nav: ToolbarProps['nav'];
};

/**
 * Header component
 *
 * Render the website header.
 */
const Header: FC<HeaderProps> = ({ className, nav, ...props }) => {
  return (
    <header className={`${styles.wrapper} ${className}`}>
      <div className={styles.body}>
        <Branding {...props} />
        <Toolbar nav={nav} className={styles.toolbar} />
      </div>
    </header>
  );
};

export default Header;