From f5cb30e4ff2f2144c77501d307ba1f4efdd846f7 Mon Sep 17 00:00:00 2001
From: Daniel Gent <daniel.gent@get10up.com>
Date: Fri, 27 Aug 2021 15:52:33 +0200
Subject: [PATCH] Initial closed menu button.

---
 .../common/Navbar/MenuButton.module.css       | 25 +++++++++++++++++++
 components/common/Navbar/MenuButton.tsx       | 24 ++++++++++++++++++
 components/common/Navbar/Navbar.tsx           |  2 ++
 3 files changed, 51 insertions(+)
 create mode 100644 components/common/Navbar/MenuButton.module.css
 create mode 100644 components/common/Navbar/MenuButton.tsx

diff --git a/components/common/Navbar/MenuButton.module.css b/components/common/Navbar/MenuButton.module.css
new file mode 100644
index 000000000..7bdbf29e3
--- /dev/null
+++ b/components/common/Navbar/MenuButton.module.css
@@ -0,0 +1,25 @@
+.menuButton {
+  cursor: pointer;
+  height: 30px;
+  margin: 0 auto;
+  width: 30px;
+}
+
+.menuButton::after,
+.menuButton::before {
+  background-color: #f4f4f4;
+  content: '';
+  height: 1px;
+  position: absolute;
+  top: 50%;
+  transition: transform 0.2s ease;
+  width: 30px;
+}
+
+.menuButton::after {
+  transform: translateY(5px);
+}
+
+.menuButton::before {
+  transform: translateY(-5px);
+}
diff --git a/components/common/Navbar/MenuButton.tsx b/components/common/Navbar/MenuButton.tsx
new file mode 100644
index 000000000..7bc34ea43
--- /dev/null
+++ b/components/common/Navbar/MenuButton.tsx
@@ -0,0 +1,24 @@
+import { FC } from 'react'
+import PropTypes from 'prop-types'
+import s from './MenuButton.module.css'
+
+interface MenuButtonProps {
+    isOpen: boolean
+    onClick: any
+}
+
+const MenuButton: FC<MenuButtonProps> = ({ isOpen, onClick }) => {
+  return (
+    <div
+      onClick={onClick}
+      className={s.menuButton}
+    />
+  )
+}
+
+MenuButton.propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  onClick: PropTypes.func.isRequired,
+}
+
+export default MenuButton
diff --git a/components/common/Navbar/Navbar.tsx b/components/common/Navbar/Navbar.tsx
index c3064585c..1286f251d 100644
--- a/components/common/Navbar/Navbar.tsx
+++ b/components/common/Navbar/Navbar.tsx
@@ -2,6 +2,7 @@ import { FC } from 'react'
 import Link from 'next/link'
 import s from './Navbar.module.css'
 import NavbarRoot from './NavbarRoot'
+import MenuButton from './MenuButton'
 import { Logo, Container } from '@components/ui'
 import { Searchbar, UserNav } from '@components/common'
 
@@ -35,6 +36,7 @@ const Navbar: FC<NavbarProps> = ({ links }) => (
               ))}
             </nav>
           </div>
+          <MenuButton isOpen onClick={() => {}} />
           <div className="flex items-center justify-end flex-1 space-x-8">
             <UserNav />
           </div>