refactor: use storybook and atomic design (#16)

BREAKING CHANGE: rewrite most of the Typescript types, so the content format (the meta in particular) needs to be updated.

17 files changed, 1092 insertions, 0 deletions

diff --git a/src/components/organisms/toolbar/main-nav.module.scss b/src/components/organisms/toolbar/main-nav.module.scss
new file mode 100644
index 0000000..24abc43
--- /dev/null
+++ b/src/components/organisms/toolbar/main-nav.module.scss
@@ -0,0 +1,96 @@
+@use "@styles/abstracts/functions" as fun;
+@use "@styles/abstracts/mixins" as mix;
+
+.item {
+  @include mix.media("screen") {
+    @include mix.dimensions("md") {
+      .checkbox,
+      .label {
+        display: none;
+      }
+
+      .modal {
+        position: relative;
+      }
+    }
+  }
+
+  .modal {
+    @include mix.media("screen") {
+      @include mix.dimensions(null, "md") {
+        padding: var(--spacing-2xs);
+        background: var(--color-bg-secondary);
+        border-top: fun.convert-px(4) solid;
+        border-bottom: fun.convert-px(4) solid;
+        border-image: radial-gradient(
+            ellipse at top,
+            var(--color-primary-lighter) 20%,
+            var(--color-primary) 100%
+          )
+          1;
+        box-shadow: fun.convert-px(2) fun.convert-px(-2) fun.convert-px(3)
+          fun.convert-px(-1) var(--color-shadow-dark);
+      }
+
+      @include mix.dimensions("sm", "md") {
+        border-left: fun.convert-px(4) solid;
+        border-right: fun.convert-px(4) solid;
+      }
+
+      @include mix.dimensions("md") {
+        top: unset;
+      }
+    }
+  }
+
+  .modal__list {
+    display: flex;
+
+    @include mix.media("screen") {
+      @include mix.dimensions("sm", "md") {
+        flex-flow: column;
+      }
+    }
+  }
+
+  .checkbox {
+    &:checked {
+      ~ .label .icon {
+        background: transparent;
+        border: transparent;
+
+        &::before {
+          top: 0;
+          transform-origin: 50% 50%;
+          transform: rotate(-45deg);
+        }
+
+        &::after {
+          bottom: 0;
+          transform-origin: 50% 50%;
+          transform: rotate(45deg);
+        }
+      }
+    }
+
+    &:not(:checked) {
+      @include mix.media("screen") {
+        @include mix.dimensions("md") {
+          ~ .modal {
+            opacity: 1;
+            visibility: visible;
+            transform: none;
+          }
+        }
+      }
+    }
+  }
+}
+
+.label {
+  display: flex;
+  place-content: center;
+  place-items: center;
+  width: var(--btn-size, #{fun.convert-px(60)});
+  height: var(--btn-size, #{fun.convert-px(60)});
+}
diff --git a/src/components/organisms/toolbar/main-nav.stories.tsx b/src/components/organisms/toolbar/main-nav.stories.tsx
new file mode 100644
index 0000000..831636f
--- /dev/null
+++ b/src/components/organisms/toolbar/main-nav.stories.tsx
@@ -0,0 +1,91 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { useState } from 'react';
+import MainNav from './main-nav';
+
+/**
+ * MainNav - Storybook Meta
+ */
+export default {
+  title: 'Organisms/Toolbar/MainNav',
+  component: MainNav,
+  argTypes: {
+    className: {
+      control: {
+        type: 'text',
+      },
+      description: 'Set additional classnames to the main nav wrapper.',
+      table: {
+        category: 'Styles',
+      },
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
+    isActive: {
+      control: {
+        type: null,
+      },
+      description: 'Determine if the main nav is open or not.',
+      type: {
+        name: 'boolean',
+        required: true,
+      },
+    },
+    items: {
+      description: 'The main nav items.',
+      type: {
+        name: 'object',
+        required: true,
+        value: {},
+      },
+    },
+    setIsActive: {
+      control: {
+        type: null,
+      },
+      description: 'A callback function to change main nav state.',
+      table: {
+        category: 'Events',
+      },
+      type: {
+        name: 'function',
+        required: true,
+      },
+    },
+  },
+} as ComponentMeta<typeof MainNav>;
+
+const Template: ComponentStory<typeof MainNav> = ({
+  isActive,
+  setIsActive: _setIsActive,
+  ...args
+}) => {
+  const [isOpen, setIsOpen] = useState<boolean>(isActive);
+
+  return <MainNav isActive={isOpen} setIsActive={setIsOpen} {...args} />;
+};
+
+/**
+ * MainNav Stories - Inactive
+ */
+export const Inactive = Template.bind({});
+Inactive.args = {
+  isActive: false,
+  items: [
+    { id: 'home', label: 'Home', href: '#' },
+    { id: 'contact', label: 'Contact', href: '#' },
+  ],
+};
+
+/**
+ * MainNav Stories - Active
+ */
+export const Active = Template.bind({});
+Active.args = {
+  isActive: true,
+  items: [
+    { id: 'home', label: 'Home', href: '#' },
+    { id: 'contact', label: 'Contact', href: '#' },
+  ],
+};
diff --git a/src/components/organisms/toolbar/main-nav.test.tsx b/src/components/organisms/toolbar/main-nav.test.tsx
new file mode 100644
index 0000000..6e50562
--- /dev/null
+++ b/src/components/organisms/toolbar/main-nav.test.tsx
@@ -0,0 +1,33 @@
+import { render, screen } from '@test-utils';
+import MainNav from './main-nav';
+
+const items = [
+  { id: 'home', label: 'Home', href: '/' },
+  { id: 'blog', label: 'Blog', href: '/blog' },
+  { id: 'contact', label: 'Contact', href: '/contact' },
+];
+
+describe('MainNav', () => {
+  it('renders a checkbox to open main nav', () => {
+    render(<MainNav items={items} isActive={false} setIsActive={() => null} />);
+    expect(screen.getByRole('checkbox')).toHaveAccessibleName('Open menu');
+  });
+
+  it('renders a checkbox to close main nav', () => {
+    render(<MainNav items={items} isActive={true} setIsActive={() => null} />);
+    expect(screen.getByRole('checkbox')).toHaveAccessibleName('Close menu');
+  });
+
+  it('renders the correct number of items', () => {
+    render(<MainNav items={items} isActive={true} setIsActive={() => null} />);
+    expect(screen.getAllByRole('listitem')).toHaveLength(items.length);
+  });
+
+  it('renders some links with the right label', () => {
+    render(<MainNav items={items} isActive={true} setIsActive={() => null} />);
+    expect(screen.getByRole('link', { name: items[0].label })).toHaveAttribute(
+      'href',
+      items[0].href
+    );
+  });
+});
diff --git a/src/components/organisms/toolbar/main-nav.tsx b/src/components/organisms/toolbar/main-nav.tsx
new file mode 100644
index 0000000..d205112
--- /dev/null
+++ b/src/components/organisms/toolbar/main-nav.tsx
@@ -0,0 +1,80 @@
+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 NavProps,
+  type NavItem,
+} from '@components/molecules/nav/nav';
+import { forwardRef, ForwardRefRenderFunction } from 'react';
+import { useIntl } from 'react-intl';
+import mainNavStyles from './main-nav.module.scss';
+import sharedStyles from './toolbar-items.module.scss';
+
+export type MainNavProps = {
+  /**
+   * Set additional classnames to the nav element.
+   */
+  className?: NavProps['className'];
+  /**
+   * The button state.
+   */
+  isActive: CheckboxProps['value'];
+  /**
+   * The main nav items.
+   */
+  items: NavItem[];
+  /**
+   * A callback function to handle button state.
+   */
+  setIsActive: CheckboxProps['setValue'];
+};
+
+/**
+ * MainNav component
+ *
+ * Render the main navigation.
+ */
+const MainNav: ForwardRefRenderFunction<HTMLDivElement, MainNavProps> = (
+  { className = '', isActive, items, setIsActive },
+  ref
+) => {
+  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}`} ref={ref}>
+      <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 forwardRef(MainNav);
diff --git a/src/components/organisms/toolbar/search.module.scss b/src/components/organisms/toolbar/search.module.scss
new file mode 100644
index 0000000..c310594
--- /dev/null
+++ b/src/components/organisms/toolbar/search.module.scss
@@ -0,0 +1,3 @@
+.modal {
+  padding-bottom: var(--spacing-md);
+}
diff --git a/src/components/organisms/toolbar/search.stories.tsx b/src/components/organisms/toolbar/search.stories.tsx
new file mode 100644
index 0000000..f0f65b4
--- /dev/null
+++ b/src/components/organisms/toolbar/search.stories.tsx
@@ -0,0 +1,88 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { useState } from 'react';
+import Search from './search';
+
+/**
+ * Search - Storybook Meta
+ */
+export default {
+  title: 'Organisms/Toolbar/Search',
+  component: Search,
+  args: {
+    searchPage: '#',
+  },
+  argTypes: {
+    className: {
+      control: {
+        type: 'text',
+      },
+      description: 'Set additional classnames to the modal wrapper.',
+      table: {
+        category: 'Styles',
+      },
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
+    isActive: {
+      control: {
+        type: null,
+      },
+      description: 'Define the modal state: either opened or closed.',
+      type: {
+        name: 'boolean',
+        required: true,
+      },
+    },
+    searchPage: {
+      control: {
+        type: 'text',
+      },
+      description: 'The search results page url.',
+      type: {
+        name: 'string',
+        required: true,
+      },
+    },
+    setIsActive: {
+      control: {
+        type: null,
+      },
+      description: 'A callback function to update modal state.',
+      table: {
+        category: 'Events',
+      },
+      type: {
+        name: 'function',
+        required: true,
+      },
+    },
+  },
+} as ComponentMeta<typeof Search>;
+
+const Template: ComponentStory<typeof Search> = ({
+  isActive,
+  setIsActive: _setIsActive,
+  ...args
+}) => {
+  const [isOpen, setIsOpen] = useState<boolean>(isActive);
+
+  return <Search isActive={isOpen} setIsActive={setIsOpen} {...args} />;
+};
+
+/**
+ * Search Stories - Inactive
+ */
+export const Inactive = Template.bind({});
+Inactive.args = {
+  isActive: false,
+};
+
+/**
+ * Search Stories - Active
+ */
+export const Active = Template.bind({});
+Active.args = {
+  isActive: true,
+};
diff --git a/src/components/organisms/toolbar/search.test.tsx b/src/components/organisms/toolbar/search.test.tsx
new file mode 100644
index 0000000..7c77eac
--- /dev/null
+++ b/src/components/organisms/toolbar/search.test.tsx
@@ -0,0 +1,14 @@
+import { render, screen } from '@test-utils';
+import Search from './search';
+
+describe('Search', () => {
+  it('renders a button to open search modal', () => {
+    render(<Search searchPage="#" isActive={false} setIsActive={() => null} />);
+    expect(screen.getByRole('checkbox')).toHaveAccessibleName('Open search');
+  });
+
+  it('renders a button to close search modal', () => {
+    render(<Search searchPage="#" isActive={true} setIsActive={() => null} />);
+    expect(screen.getByRole('checkbox')).toHaveAccessibleName('Close search');
+  });
+});
diff --git a/src/components/organisms/toolbar/search.tsx b/src/components/organisms/toolbar/search.tsx
new file mode 100644
index 0000000..6a8af26
--- /dev/null
+++ b/src/components/organisms/toolbar/search.tsx
@@ -0,0 +1,80 @@
+import Checkbox, { type CheckboxProps } from '@components/atoms/forms/checkbox';
+import MagnifyingGlass from '@components/atoms/icons/magnifying-glass';
+import FlippingLabel from '@components/molecules/forms/flipping-label';
+import useInputAutofocus from '@utils/hooks/use-input-autofocus';
+import { forwardRef, ForwardRefRenderFunction, useRef } from 'react';
+import { useIntl } from 'react-intl';
+import SearchModal, { type SearchModalProps } from '../modals/search-modal';
+import searchStyles from './search.module.scss';
+import sharedStyles from './toolbar-items.module.scss';
+
+export type SearchProps = {
+  /**
+   * Set additional classnames to the modal wrapper.
+   */
+  className?: SearchModalProps['className'];
+  /**
+   * The button state.
+   */
+  isActive: CheckboxProps['value'];
+  /**
+   * A callback function to execute search.
+   */
+  searchPage: SearchModalProps['searchPage'];
+  /**
+   * A callback function to handle button state.
+   */
+  setIsActive: CheckboxProps['setValue'];
+};
+
+const Search: ForwardRefRenderFunction<HTMLDivElement, SearchProps> = (
+  { className = '', isActive, searchPage, setIsActive },
+  ref
+) => {
+  const intl = useIntl();
+  const label = isActive
+    ? intl.formatMessage({
+        defaultMessage: 'Close search',
+        id: 'LDDUNO',
+        description: 'Search: Close label',
+      })
+    : intl.formatMessage({
+        defaultMessage: 'Open search',
+        id: 'Xj+WXB',
+        description: 'Search: Open label',
+      });
+
+  const searchInputRef = useRef<HTMLInputElement>(null);
+  useInputAutofocus({
+    condition: isActive,
+    delay: 360,
+    ref: searchInputRef,
+  });
+
+  return (
+    <div className={`${sharedStyles.item} ${searchStyles.item}`} ref={ref}>
+      <Checkbox
+        id="search-button"
+        name="search-button"
+        value={isActive}
+        setValue={setIsActive}
+        className={`${sharedStyles.checkbox} ${searchStyles.checkbox}`}
+      />
+      <FlippingLabel
+        className={sharedStyles.label}
+        htmlFor="search-button"
+        aria-label={label}
+        isActive={isActive}
+      >
+        <MagnifyingGlass />
+      </FlippingLabel>
+      <SearchModal
+        className={`${sharedStyles.modal} ${searchStyles.modal} ${className}`}
+        ref={searchInputRef}
+        searchPage={searchPage}
+      />
+    </div>
+  );
+};
+
+export default forwardRef(Search);
diff --git a/src/components/organisms/toolbar/settings.module.scss b/src/components/organisms/toolbar/settings.module.scss
new file mode 100644
index 0000000..08c8cd4
--- /dev/null
+++ b/src/components/organisms/toolbar/settings.module.scss
@@ -0,0 +1,10 @@
+@use "@styles/abstracts/functions" as fun;
+@use "@styles/abstracts/mixins" as mix;
+
+.modal {
+  @include mix.media("screen") {
+    @include mix.dimensions("sm") {
+      width: 120%;
+    }
+  }
+}
diff --git a/src/components/organisms/toolbar/settings.stories.tsx b/src/components/organisms/toolbar/settings.stories.tsx
new file mode 100644
index 0000000..08ec579
--- /dev/null
+++ b/src/components/organisms/toolbar/settings.stories.tsx
@@ -0,0 +1,112 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { useState } from 'react';
+import Settings from './settings';
+
+/**
+ * Settings - Storybook Meta
+ */
+export default {
+  title: 'Organisms/Toolbar/Settings',
+  component: Settings,
+  args: {
+    ackeeStorageKey: 'ackee-tracking',
+    motionStorageKey: 'reduced-motion',
+  },
+  argTypes: {
+    ackeeStorageKey: {
+      control: {
+        type: 'text',
+      },
+      description: 'Set Ackee settings local storage key.',
+      type: {
+        name: 'string',
+        required: true,
+      },
+    },
+    className: {
+      control: {
+        type: 'text',
+      },
+      description: 'Set additional classnames to the modal wrapper.',
+      table: {
+        category: 'Styles',
+      },
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
+    isActive: {
+      control: {
+        type: null,
+      },
+      description: 'Define the modal state: either opened or closed.',
+      table: {
+        category: 'Events',
+      },
+      type: {
+        name: 'boolean',
+        required: true,
+      },
+    },
+    motionStorageKey: {
+      control: {
+        type: 'text',
+      },
+      description: 'Set Reduced motion settings local storage key.',
+      type: {
+        name: 'string',
+        required: true,
+      },
+    },
+    setIsActive: {
+      control: {
+        type: null,
+      },
+      description: 'A callback function to update modal state.',
+      type: {
+        name: 'function',
+        required: true,
+      },
+    },
+    tooltipClassName: {
+      control: {
+        type: 'text',
+      },
+      description: 'Set additional classnames to the tooltip wrapper.',
+      table: {
+        category: 'Styles',
+      },
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
+  },
+} as ComponentMeta<typeof Settings>;
+
+const Template: ComponentStory<typeof Settings> = ({
+  isActive,
+  setIsActive: _setIsActive,
+  ...args
+}) => {
+  const [isOpen, setIsOpen] = useState<boolean>(isActive);
+
+  return <Settings isActive={isOpen} setIsActive={setIsOpen} {...args} />;
+};
+
+/**
+ * Settings Stories - Inactive
+ */
+export const Inactive = Template.bind({});
+Inactive.args = {
+  isActive: false,
+};
+
+/**
+ * Settings Stories - Active
+ */
+export const Active = Template.bind({});
+Active.args = {
+  isActive: true,
+};
diff --git a/src/components/organisms/toolbar/settings.test.tsx b/src/components/organisms/toolbar/settings.test.tsx
new file mode 100644
index 0000000..7ccb234
--- /dev/null
+++ b/src/components/organisms/toolbar/settings.test.tsx
@@ -0,0 +1,32 @@
+import { render, screen } from '@test-utils';
+import Settings from './settings';
+
+describe('Settings', () => {
+  it('renders a button to open settings modal', () => {
+    render(
+      <Settings
+        ackeeStorageKey="ackee-tracking"
+        motionStorageKey="reduced-motion"
+        isActive={false}
+        setIsActive={() => null}
+      />
+    );
+    expect(
+      screen.getByRole('checkbox', { name: 'Open settings' })
+    ).toBeInTheDocument();
+  });
+
+  it('renders a button to close settings modal', () => {
+    render(
+      <Settings
+        ackeeStorageKey="ackee-tracking"
+        motionStorageKey="reduced-motion"
+        isActive={true}
+        setIsActive={() => null}
+      />
+    );
+    expect(
+      screen.getByRole('checkbox', { name: 'Close settings' })
+    ).toBeInTheDocument();
+  });
+});
diff --git a/src/components/organisms/toolbar/settings.tsx b/src/components/organisms/toolbar/settings.tsx
new file mode 100644
index 0000000..ceb6db4
--- /dev/null
+++ b/src/components/organisms/toolbar/settings.tsx
@@ -0,0 +1,74 @@
+import Checkbox, { type CheckboxProps } from '@components/atoms/forms/checkbox';
+import Cog from '@components/atoms/icons/cog';
+import FlippingLabel from '@components/molecules/forms/flipping-label';
+import { forwardRef, ForwardRefRenderFunction } from 'react';
+import { useIntl } from 'react-intl';
+import SettingsModal, {
+  type SettingsModalProps,
+} from '../modals/settings-modal';
+import settingsStyles from './settings.module.scss';
+import sharedStyles from './toolbar-items.module.scss';
+
+export type SettingsProps = SettingsModalProps & {
+  /**
+   * The button state.
+   */
+  isActive: CheckboxProps['value'];
+  /**
+   * A callback function to handle button state.
+   */
+  setIsActive: CheckboxProps['setValue'];
+};
+
+const Settings: ForwardRefRenderFunction<HTMLDivElement, SettingsProps> = (
+  {
+    ackeeStorageKey,
+    className = '',
+    isActive,
+    motionStorageKey,
+    setIsActive,
+    tooltipClassName = '',
+  },
+  ref
+) => {
+  const intl = useIntl();
+  const label = isActive
+    ? intl.formatMessage({
+        defaultMessage: 'Close settings',
+        id: '+viX9b',
+        description: 'Settings: Close label',
+      })
+    : intl.formatMessage({
+        defaultMessage: 'Open settings',
+        id: 'QCW3cy',
+        description: 'Settings: Open label',
+      });
+
+  return (
+    <div className={`${sharedStyles.item} ${settingsStyles.item}`} ref={ref}>
+      <Checkbox
+        id="settings-button"
+        name="settings-button"
+        value={isActive}
+        setValue={setIsActive}
+        className={`${sharedStyles.checkbox} ${settingsStyles.checkbox}`}
+      />
+      <FlippingLabel
+        className={sharedStyles.label}
+        htmlFor="settings-button"
+        aria-label={label}
+        isActive={isActive}
+      >
+        <Cog />
+      </FlippingLabel>
+      <SettingsModal
+        ackeeStorageKey={ackeeStorageKey}
+        className={`${sharedStyles.modal} ${settingsStyles.modal} ${className}`}
+        motionStorageKey={motionStorageKey}
+        tooltipClassName={tooltipClassName}
+      />
+    </div>
+  );
+};
+
+export default forwardRef(Settings);
diff --git a/src/components/organisms/toolbar/toolbar-items.module.scss b/src/components/organisms/toolbar/toolbar-items.module.scss
new file mode 100644
index 0000000..86b4924
--- /dev/null
+++ b/src/components/organisms/toolbar/toolbar-items.module.scss
@@ -0,0 +1,91 @@
+@use "@styles/abstracts/functions" as fun;
+@use "@styles/abstracts/mixins" as mix;
+@use "@styles/abstracts/placeholders";
+
+.item {
+  --btn-size: #{fun.convert-px(65)};
+
+  display: flex;
+  position: relative;
+
+  @include mix.media("screen") {
+    @include mix.dimensions("sm") {
+      justify-content: flex-end;
+    }
+
+    @include mix.dimensions("md") {
+      justify-content: flex-end;
+    }
+  }
+}
+
+.modal {
+  position: absolute;
+  top: var(--toolbar-size, calc(var(--btn-size) + var(--spacing-2xs)));
+  transition: all 0.8s ease-in-out 0s, background 0s;
+
+  @include mix.media("screen") {
+    @include mix.dimensions(null, "sm") {
+      position: fixed;
+      left: 0;
+      right: 0;
+    }
+  }
+}
+
+.label {
+  --draw-border-thickness: #{fun.convert-px(4)};
+  --draw-border-color1: var(--color-primary-light);
+  --draw-border-color2: var(--color-primary-lighter);
+
+  @include mix.media("screen") {
+    @include mix.dimensions("sm") {
+      border-radius: fun.convert-px(5);
+    }
+  }
+
+  &:hover {
+    @extend %draw-borders;
+  }
+
+  &:active {
+    --draw-border-color1: var(--color-primary-dark);
+    --draw-border-color2: var(--color-primary-light);
+
+    @extend %draw-borders;
+  }
+}
+
+.checkbox {
+  position: absolute;
+  top: calc(var(--btn-size) / 2);
+  left: calc(var(--btn-size) / 2);
+  opacity: 0;
+  cursor: pointer;
+
+  &:hover,
+  &:focus {
+    ~ .label {
+      @extend %draw-borders;
+    }
+  }
+
+  &:not(:checked) {
+    ~ .modal {
+      opacity: 0;
+      visibility: hidden;
+
+      @include mix.media("screen") {
+        @include mix.dimensions(null, "sm") {
+          transform: translateX(-100vw);
+        }
+
+        @include mix.dimensions("sm") {
+          transform: perspective(#{fun.convert-px(400)})
+            translate3d(0, 0, #{fun.convert-px(-400)});
+          transform-origin: 100% -50%;
+        }
+      }
+    }
+  }
+}
diff --git a/src/components/organisms/toolbar/toolbar.module.scss b/src/components/organisms/toolbar/toolbar.module.scss
new file mode 100644
index 0000000..4bcabcb
--- /dev/null
+++ b/src/components/organisms/toolbar/toolbar.module.scss
@@ -0,0 +1,98 @@
+@use "@styles/abstracts/functions" as fun;
+@use "@styles/abstracts/mixins" as mix;
+@use "@styles/abstracts/placeholders";
+
+.wrapper {
+  --toolbar-size: #{fun.convert-px(75)};
+
+  display: flex;
+  flex-flow: row wrap;
+  align-items: center;
+  justify-content: space-around;
+  width: 100%;
+  height: var(--toolbar-size);
+  position: relative;
+  background: var(--color-bg);
+  border-top: fun.convert-px(4) solid;
+  border-image: radial-gradient(
+      ellipse at top,
+      var(--color-primary-lighter) 20%,
+      var(--color-primary) 100%
+    )
+    1;
+  box-shadow: 0 fun.convert-px(-2) fun.convert-px(3) fun.convert-px(-1)
+    var(--color-shadow-dark);
+
+  :global {
+    animation: slide-in-from-bottom 0.8s ease-in-out 0s 1;
+  }
+
+  @include mix.media("screen") {
+    @include mix.dimensions("sm") {
+      :global {
+        animation: slide-in-from-top 1s ease-in-out 0s 1;
+      }
+    }
+  }
+
+  .modal {
+    &--search,
+    &--settings {
+      @include mix.media("screen") {
+        @include mix.dimensions("sm") {
+          min-width: 35ch;
+        }
+      }
+    }
+  }
+
+  @include mix.media("screen") {
+    @include mix.dimensions(null, "2xs", "height") {
+      --toolbar-size: #{fun.convert-px(70)};
+    }
+
+    @include mix.dimensions(null, "sm") {
+      position: fixed;
+      bottom: 0;
+      left: 0;
+      z-index: 5;
+
+      .modal {
+        top: unset;
+        bottom: calc(var(--toolbar-size) - #{fun.convert-px(4)});
+        max-height: calc(100vh - var(--toolbar-size));
+      }
+
+      .tooltip {
+        padding: calc(var(--title-height) / 2 + var(--spacing-2xs))
+          var(--spacing-2xs) var(--spacing-2xs);
+        top: unset;
+        bottom: calc(100% + var(--spacing-2xs));
+        transform-origin: bottom right;
+      }
+    }
+
+    @include mix.dimensions("sm", "md") {
+      .modal {
+        top: calc(var(--toolbar-size) + var(--spacing-2xs));
+        bottom: unset;
+      }
+    }
+
+    @include mix.dimensions("sm") {
+      justify-content: flex-end;
+      gap: var(--spacing-sm);
+
+      .tooltip {
+        transform-origin: top right;
+      }
+    }
+
+    @include mix.dimensions("md") {
+      .tooltip {
+        width: 120%;
+        right: -10%;
+      }
+    }
+  }
+}
diff --git a/src/components/organisms/toolbar/toolbar.stories.tsx b/src/components/organisms/toolbar/toolbar.stories.tsx
new file mode 100644
index 0000000..d613442
--- /dev/null
+++ b/src/components/organisms/toolbar/toolbar.stories.tsx
@@ -0,0 +1,90 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import ToolbarComponent from './toolbar';
+
+/**
+ * Toolbar - Storybook Meta
+ */
+export default {
+  title: 'Organisms/Toolbar',
+  component: ToolbarComponent,
+  args: {
+    ackeeStorageKey: 'ackee-tracking',
+    motionStorageKey: 'reduced-motion',
+    searchPage: '#',
+  },
+  argTypes: {
+    ackeeStorageKey: {
+      control: {
+        type: 'text',
+      },
+      description: 'Set Ackee settings local storage key.',
+      type: {
+        name: 'string',
+        required: true,
+      },
+    },
+    className: {
+      control: {
+        type: 'text',
+      },
+      description: 'Set additional classnames to the toolbar wrapper.',
+      table: {
+        category: 'Styles',
+      },
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
+    motionStorageKey: {
+      control: {
+        type: 'text',
+      },
+      description: 'Set Reduced motion settings local storage key.',
+      type: {
+        name: 'string',
+        required: true,
+      },
+    },
+    nav: {
+      description: 'The main nav items.',
+      type: {
+        name: 'object',
+        required: true,
+        value: {},
+      },
+    },
+    searchPage: {
+      control: {
+        type: 'text',
+      },
+      description: 'The search results page url.',
+      type: {
+        name: 'string',
+        required: true,
+      },
+    },
+  },
+  parameters: {
+    layout: 'fullscreen',
+  },
+} as ComponentMeta<typeof ToolbarComponent>;
+
+const Template: ComponentStory<typeof ToolbarComponent> = (args) => (
+  <ToolbarComponent {...args} />
+);
+
+const nav = [
+  { id: 'home-link', href: '#', label: 'Home' },
+  { id: 'blog-link', href: '#', label: 'Blog' },
+  { id: 'cv-link', href: '#', label: 'CV' },
+  { id: 'contact-link', href: '#', label: 'Contact' },
+];
+
+/**
+ * Toolbar Story
+ */
+export const Toolbar = Template.bind({});
+Toolbar.args = {
+  nav,
+};
diff --git a/src/components/organisms/toolbar/toolbar.test.tsx b/src/components/organisms/toolbar/toolbar.test.tsx
new file mode 100644
index 0000000..72965e8
--- /dev/null
+++ b/src/components/organisms/toolbar/toolbar.test.tsx
@@ -0,0 +1,23 @@
+import { render, screen } from '@test-utils';
+import Toolbar from './toolbar';
+
+const nav = [
+  { id: 'home-link', href: '/', label: 'Home' },
+  { id: 'blog-link', href: '/blog', label: 'Blog' },
+  { id: 'cv-link', href: '/cv', label: 'CV' },
+  { id: 'contact-link', href: '/contact', label: 'Contact' },
+];
+
+describe('Toolbar', () => {
+  it('renders a navigation menu', () => {
+    render(
+      <Toolbar
+        ackeeStorageKey="ackee-tracking"
+        motionStorageKey="reduced-motion"
+        nav={nav}
+        searchPage="#"
+      />
+    );
+    expect(screen.getByRole('navigation')).toBeInTheDocument();
+  });
+});
diff --git a/src/components/organisms/toolbar/toolbar.tsx b/src/components/organisms/toolbar/toolbar.tsx
new file mode 100644
index 0000000..ee61a7b
--- /dev/null
+++ b/src/components/organisms/toolbar/toolbar.tsx
@@ -0,0 +1,77 @@
+import useClickOutside from '@utils/hooks/use-click-outside';
+import useRouteChange from '@utils/hooks/use-route-change';
+import { FC, useRef, useState } from 'react';
+import MainNav, { type MainNavProps } from '../toolbar/main-nav';
+import Search, { type SearchProps } from '../toolbar/search';
+import Settings, { SettingsProps } from '../toolbar/settings';
+import styles from './toolbar.module.scss';
+
+export type ToolbarProps = Pick<SearchProps, 'searchPage'> &
+  Pick<SettingsProps, 'ackeeStorageKey' | 'motionStorageKey'> & {
+    /**
+     * Set additional classnames to the toolbar wrapper.
+     */
+    className?: string;
+    /**
+     * The main nav items.
+     */
+    nav: MainNavProps['items'];
+  };
+
+/**
+ * Toolbar component
+ *
+ * Render the website toolbar.
+ */
+const Toolbar: FC<ToolbarProps> = ({
+  ackeeStorageKey,
+  className = '',
+  motionStorageKey,
+  nav,
+  searchPage,
+}) => {
+  const [isNavOpened, setIsNavOpened] = useState<boolean>(false);
+  const [isSearchOpened, setIsSearchOpened] = useState<boolean>(false);
+  const [isSettingsOpened, setIsSettingsOpened] = useState<boolean>(false);
+  const mainNavRef = useRef<HTMLDivElement>(null);
+  const searchRef = useRef<HTMLDivElement>(null);
+  const settingsRef = useRef<HTMLDivElement>(null);
+
+  useClickOutside(mainNavRef, () => isNavOpened && setIsNavOpened(false));
+  useClickOutside(searchRef, () => isSearchOpened && setIsSearchOpened(false));
+  useClickOutside(
+    settingsRef,
+    () => isSettingsOpened && setIsSettingsOpened(false)
+  );
+  useRouteChange(() => setIsSearchOpened(false));
+
+  return (
+    <div className={`${styles.wrapper} ${className}`}>
+      <MainNav
+        items={nav}
+        isActive={isNavOpened}
+        setIsActive={setIsNavOpened}
+        className={styles.modal}
+        ref={mainNavRef}
+      />
+      <Search
+        searchPage={searchPage}
+        isActive={isSearchOpened}
+        setIsActive={setIsSearchOpened}
+        className={`${styles.modal} ${styles['modal--search']}`}
+        ref={searchRef}
+      />
+      <Settings
+        ackeeStorageKey={ackeeStorageKey}
+        className={`${styles.modal} ${styles['modal--settings']}`}
+        isActive={isSettingsOpened}
+        motionStorageKey={motionStorageKey}
+        ref={settingsRef}
+        setIsActive={setIsSettingsOpened}
+        tooltipClassName={styles.tooltip}
+      />
+    </div>
+  );
+};
+
+export default Toolbar;