chore: add a Toolbar component

1 files changed, 51 insertions, 0 deletions

diff --git a/src/components/organisms/toolbar/toolbar.tsx b/src/components/organisms/toolbar/toolbar.tsx
new file mode 100644
index 0000000..81e80cf
--- /dev/null
+++ b/src/components/organisms/toolbar/toolbar.tsx
@@ -0,0 +1,51 @@
+import { useState, VFC } from 'react';
+import MainNav, { type MainNavProps } from '../toolbar/main-nav';
+import Search from '../toolbar/search';
+import Settings from '../toolbar/settings';
+import styles from './toolbar.module.scss';
+
+export type ToolbarProps = {
+  /**
+   * Set additional classnames to the toolbar wrapper.
+   */
+  className?: string;
+  /**
+   * The main nav items.
+   */
+  nav: MainNavProps['items'];
+};
+
+/**
+ * Toolbar component
+ *
+ * Render the website toolbar.
+ */
+const Toolbar: VFC<ToolbarProps> = ({ className = '', nav }) => {
+  const [isNavOpened, setIsNavOpened] = useState<boolean>(false);
+  const [isSettingsOpened, setIsSettingsOpened] = useState<boolean>(false);
+  const [isSearchOpened, setIsSearchOpened] = useState<boolean>(false);
+
+  return (
+    <div className={`${styles.wrapper} ${className}`}>
+      <MainNav
+        items={nav}
+        isActive={isNavOpened}
+        setIsActive={setIsNavOpened}
+        className={styles.modal}
+      />
+      <Search
+        isActive={isSearchOpened}
+        setIsActive={setIsSearchOpened}
+        className={`${styles.modal} ${styles['modal--search']}`}
+      />
+      <Settings
+        isActive={isSettingsOpened}
+        setIsActive={setIsSettingsOpened}
+        className={`${styles.modal} ${styles['modal--settings']}`}
+        tooltipClassName={styles.tooltip}
+      />
+    </div>
+  );
+};
+
+export default Toolbar;