chore: add a MainNav component

1 files changed, 74 insertions, 0 deletions

diff --git a/src/components/organisms/toolbar/main-nav.tsx b/src/components/organisms/toolbar/main-nav.tsx
new file mode 100644
index 0000000..50bbe8b
--- /dev/null
+++ b/src/components/organisms/toolbar/main-nav.tsx
@@ -0,0 +1,74 @@
+import Checkbox, { type CheckboxProps } from '@components/atoms/forms/checkbox';
+import Label from '@components/atoms/forms/label';
+import Hamburger from '@components/atoms/icons/hamburger';
+import Nav, { type NavItem } from '@components/molecules/nav/nav';
+import { VFC } from 'react';
+import { useIntl } from 'react-intl';
+import sharedStyles from './toolbar-items.module.scss';
+import mainNavStyles from './main-nav.module.scss';
+
+export type MainNavProps = {
+  /**
+   * Set additional classnames to the nav element.
+   */
+  className?: string;
+  /**
+   * The button state.
+   */
+  isActive: CheckboxProps['value'];
+  /**
+   * The main nav items.
+   */
+  items: NavItem[];
+  /**
+   * A callback function to handle button state.
+   */
+  setIsActive: CheckboxProps['setValue'];
+};
+
+const MainNav: VFC<MainNavProps> = ({
+  className = '',
+  isActive,
+  items,
+  setIsActive,
+}) => {
+  const intl = useIntl();
+  const label = isActive
+    ? intl.formatMessage({
+        defaultMessage: 'Close menu',
+        description: 'MainNav: Close label',
+        id: 'aJC7D2',
+      })
+    : intl.formatMessage({
+        defaultMessage: 'Open menu',
+        description: 'MainNav: Open label',
+        id: 'GTbGMy',
+      });
+
+  return (
+    <div className={`${sharedStyles.item} ${mainNavStyles.item}`}>
+      <Checkbox
+        id="main-nav-button"
+        name="main-nav-button"
+        value={isActive}
+        setValue={setIsActive}
+        className={`${sharedStyles.checkbox} ${mainNavStyles.checkbox}`}
+      />
+      <Label
+        htmlFor="main-nav-button"
+        aria-label={label}
+        className={`${sharedStyles.label} ${mainNavStyles.label}`}
+      >
+        <Hamburger iconClassName={mainNavStyles.icon} />
+      </Label>
+      <Nav
+        kind="main"
+        items={items}
+        className={`${sharedStyles.modal} ${mainNavStyles.modal} ${className}`}
+        listClassName={mainNavStyles.modal__list}
+      />
+    </div>
+  );
+};
+
+export default MainNav;