refactor(components): replace Toolbar with Navbar component

* remove SearchModal and SettingsModal components
* add a generic NavbarItem component (instead of the previous toolbar
items to avoid unreadable styles...)
* move FlippingLabel component logic into NavbarItem since it is only
used here

1 files changed, 110 insertions, 0 deletions

diff --git a/src/components/organisms/navbar/navbar.stories.tsx b/src/components/organisms/navbar/navbar.stories.tsx
new file mode 100644
index 0000000..fef995e
--- /dev/null
+++ b/src/components/organisms/navbar/navbar.stories.tsx
@@ -0,0 +1,110 @@
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import { Navbar as NavbarComponent } from './navbar';
+
+/**
+ * Navbar - Storybook Meta
+ */
+export default {
+  title: 'Organisms/Navbar',
+  component: NavbarComponent,
+  args: {
+    searchPage: '#',
+  },
+  argTypes: {
+    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 NavbarComponent>;
+
+const Template: ComponentStory<typeof NavbarComponent> = (args) => (
+  <NavbarComponent {...args} />
+);
+
+const doNothing = () => {
+  // do nothing;
+};
+
+/**
+ * Navbar Stories - With all items inactive
+ */
+export const NavbarInactiveItems = Template.bind({});
+NavbarInactiveItems.args = {
+  items: [
+    {
+      icon: 'hamburger',
+      id: 'main-nav',
+      isActive: false,
+      label: 'Nav',
+      contents: 'Main nav contents',
+      onToggle: doNothing,
+    },
+    {
+      icon: 'magnifying-glass',
+      id: 'search',
+      isActive: false,
+      label: 'Search',
+      contents: 'Search contents',
+      onToggle: doNothing,
+    },
+    {
+      icon: 'cog',
+      id: 'settings',
+      isActive: false,
+      label: 'Settings',
+      contents: 'Settings contents',
+      onToggle: doNothing,
+    },
+  ],
+};
+
+/**
+ * Navbar Stories - With one item active
+ */
+export const NavbarActiveItem = Template.bind({});
+NavbarActiveItem.args = {
+  items: [
+    {
+      icon: 'hamburger',
+      id: 'main-nav',
+      isActive: true,
+      label: 'Nav',
+      contents: 'Main nav contents',
+      onToggle: doNothing,
+    },
+    {
+      icon: 'magnifying-glass',
+      id: 'search',
+      isActive: false,
+      label: 'Search',
+      contents: 'Search contents',
+      onToggle: doNothing,
+    },
+    {
+      icon: 'cog',
+      id: 'settings',
+      isActive: false,
+      label: 'Settings',
+      contents: 'Settings contents',
+      onToggle: doNothing,
+    },
+  ],
+};