Add Hamburger menu component

Author: Roshanjossey

src/components/navbar/HamburgerButton.tsx

@@ -0,0 +1,35 @@
+import { useState } from 'react'
+
+const HamburgerMenu = () => {
+  const [isOpen, setIsOpen] = useState(false)
+  const genericHamburgerLine = `h-1 w-6 my-0.5 rounded-full bg-black transition ease transform duration-300`
+
+  return (
+    <button
+      className="flex flex-col h-10 w-10 rounded justify-center items-center group"
+      onClick={() => setIsOpen(!isOpen)}
+    >
+      <div
+        className={`${genericHamburgerLine} ${
+          isOpen
+            ? 'rotate-45 translate-y-2 opacity-50 group-hover:opacity-100'
+            : 'opacity-50 group-hover:opacity-100'
+        }`}
+      />
+      <div
+        className={`${genericHamburgerLine} ${
+          isOpen ? 'opacity-0' : 'opacity-50 group-hover:opacity-100'
+        }`}
+      />
+      <div
+        className={`${genericHamburgerLine} ${
+          isOpen
+            ? '-rotate-45 -translate-y-2 opacity-50 group-hover:opacity-100'
+            : 'opacity-50 group-hover:opacity-100'
+        }`}
+      />
+    </button>
+  )
+}
+
+export default HamburgerMenu

src/components/navbar/Navbar.tsx

@@ -3,6 +3,7 @@ import Link from 'next/link'
 import { useRouter } from 'next/router'
 import React from 'react'
 import Button from '../Button'
+import HamburgerMenu from './HamburgerButton'
 const ThemeButton = dynamic(() => import('./ThemeButton'), {
   ssr: false,
 })
@@ -18,7 +19,7 @@ export default function Navbar() {
             <div className="logo w-10 h-10"></div>
           </a>
         </Link>
-        <div className="space-x-4">
+        <div className="space-x-4 flex">
           <ThemeButton />
           {pathname !== '/story' && (
             <Button>
@@ -27,6 +28,7 @@ export default function Navbar() {
               </Link>
             </Button>
           )}
+          <HamburgerMenu />
         </div>
       </div>
       <style jsx>{`