chore: add a MainNavButton component

I also move the active state from the hamburger to this pseudo-button.
It makes more sense that the button handles the icon shape.

1 files changed, 75 insertions, 0 deletions

diff --git a/src/components/molecules/buttons/main-nav-button.tsx b/src/components/molecules/buttons/main-nav-button.tsx
new file mode 100644
index 0000000..59407db
--- /dev/null
+++ b/src/components/molecules/buttons/main-nav-button.tsx
@@ -0,0 +1,75 @@
+import Checkbox, { CheckboxProps } from '@components/atoms/forms/checkbox';
+import Label from '@components/atoms/forms/label';
+import Hamburger from '@components/atoms/icons/hamburger';
+import { VFC } from 'react';
+import { useIntl } from 'react-intl';
+import styles from './main-nav-button.module.scss';
+
+export type MainNavButtonProps = {
+  /**
+   * Set additional classnames to the checkbox.
+   */
+  checkboxClassName?: string;
+  /**
+   * The button state.
+   */
+  isActive: CheckboxProps['value'];
+  /**
+   * Set additional classnames to the label.
+   */
+  labelClassName?: string;
+  /**
+   * A callback function to handle button state.
+   */
+  setIsActive: CheckboxProps['setValue'];
+};
+
+/**
+ * MainNavButton component
+ *
+ * Render a hamburger icon or a close icon depending on state.
+ */
+const MainNavButton: VFC<MainNavButtonProps> = ({
+  checkboxClassName = '',
+  isActive,
+  labelClassName = '',
+  setIsActive,
+}) => {
+  const intl = useIntl();
+  const label = isActive
+    ? intl.formatMessage({
+        defaultMessage: 'Close menu',
+        id: 'wT7YZb',
+        description: 'MainNavButton: close menu label',
+      })
+    : intl.formatMessage({
+        defaultMessage: 'Open menu',
+        id: 'P7j8ZZ',
+        description: 'MainNavButton: open menu label',
+      });
+  const hamburgerModifier = isActive ? 'icon--active' : '';
+
+  return (
+    <>
+      <Checkbox
+        id="main-nav-button"
+        name="main-nav-button"
+        value={isActive}
+        setValue={setIsActive}
+        className={`${styles.checkbox} ${checkboxClassName}`}
+      />
+      <Label
+        htmlFor="main-nav-button"
+        className={`${styles.label} ${labelClassName}`}
+        aria-label={label}
+      >
+        <Hamburger
+          className={styles.icon__wrapper}
+          iconClassName={styles[hamburgerModifier]}
+        />
+      </Label>
+    </>
+  );
+};
+
+export default MainNavButton;