Hamburger menu responsive (#81) 🚀

* Minor fix 🚀

* Added hamburger menu 🚀

* First hamburger menu raw implementation 🚀

* Added new art menu item + fixed height ✨

* added overlay and animation 🚀

* Fixed desktop styles ✨

* raw csstransition animation 🚀

* Animation with react transition group 🚀

* styled icons complete package 🚀

* Added button to storybook 🚀

* Improving animations ✨

* Menu complted ✨

* Menu ready for production 🚀

Author: chicio

__stories__/atoms/icon.stories.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { Icon } from "../../src/components/design-system/atoms/icon";
-import { Github } from "@styled-icons/fa-brands";
 import { Meta } from "@storybook/react";
+import { Github } from "styled-icons/boxicons-logos";
 
 export const IconContainer: React.VFC = () => (
   <Icon>

__stories__/atoms/overlay.stories.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import { Meta } from "@storybook/react";
+import { Overlay } from "../../src/components/design-system/atoms/overlay";
+import { Paragraph } from "../../src/components/design-system/atoms/paragraph";
+
+export const Standard: React.VFC = () => (
+  <>
+    <Overlay zIndex={100} delay={"0.25s"} />
+    <Paragraph>
+      {"An overlay covers 100% of the visible contain with opacity"}
+    </Paragraph>
+  </>
+);
+
+export default {
+  title: "Atoms/Overlay",
+  component: Overlay,
+} as Meta;

__stories__/molecules/close.stories.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { Meta } from "@storybook/react";
+import { Close } from "../../src/components/design-system/molecules/close";
+
+export const CloseContainer: React.VFC = () => (
+  <Close onClick={() => alert("click")} />
+);
+
+// @ts-ignore
+CloseContainer.storyName = "Close";
+
+export default {
+  title: "Molecules",
+  component: Close,
+} as Meta;

__stories__/molecules/hamburger-menu.stories.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { Meta } from "@storybook/react";
+import { HamburgerMenu } from "../../src/components/design-system/molecules/hamburger-menu";
+
+export const HamburgerMenuContainer: React.VFC = () => (
+  <HamburgerMenu onClick={() => alert("click")} />
+);
+
+// @ts-ignore
+HamburgerMenuContainer.storyName = "Hamburger Menu";
+
+export default {
+  title: "Molecules",
+  component: HamburgerMenu,
+} as Meta;

__stories__/molecules/social-contact.stories.tsx

@@ -4,7 +4,7 @@ import {
   SocialContact,
   SocialContactProps,
 } from "../../src/components/design-system/molecules/social-contact";
-import { Linkedin } from "@styled-icons/fa-brands";
+import { Linkedin } from "styled-icons/boxicons-logos";
 
 const Template: Story<SocialContactProps> = (args) => (
   <SocialContact {...args} />

__stories__/templates/blog-generic-post-list-page.stories.tsx

@@ -3,8 +3,9 @@ import { Meta, Story } from "@storybook/react";
 import { BlogPage } from "../../src/components/design-system/templates/blog-page";
 import {
   BlogGenericPostListPage,
-  BlogGenericPostListPageProps,
+  BlogGenericPostListPageProps
 } from "../../src/components/design-system/templates/blog-generic-post-list-page";
+import { OgPageType } from "../../src/logic/seo";
 
 export const BlogGenericPostListPagePageStory: Story<BlogGenericPostListPageProps> = (
   args
@@ -135,7 +136,7 @@ BlogGenericPostListPagePageStory.args = {
     pathname: "/blog/archive/",
     url: "http://localhost:8000/blog/archive/",
   },
-  ogPageType: "WebSite",
+  ogPageType: OgPageType.WebSite,
   ogImage: "/a-photo.jpg",
   trackingCategory: "archive",
 };