mobile menu

screens/menu.tsx

@@ -1,17 +1,34 @@
-import React from 'react'
+import React, { useState, useCallback } from 'react'
 
 import Link from '../components/link'
 
 import '../styles/menu.styl'
 
+const HomeLink = () => <div className='home'>
+    <Link href='/'>
+        <div>fantus</div>
+    </Link>
+</div>
+
 const Menu: React.FC = () => {
+
+    const [open, setOpen] = useState(false)
+
+    const _close = useCallback(() => {
+        setOpen(false)
+    }, [])
+
+    const _toggle = useCallback(() => {
+        setOpen(!open)
+    }, [open])
+
     return <nav className='main flex justify-between items-center'>
-        <div className='left'>
-            <Link href='/'>
-                <div>fantus</div>
-            </Link>
-        </div>
-        <div className='right flex'>
+        <HomeLink />
+
+        <img id='icon' src='/assets/menu.svg' onClick={_toggle} />
+
+        <div className={`links flex ${open ? 'open' : ''}`.trim()} onClick={_close}>
+            <HomeLink />
             <Link href='/works'>
                 <div>works</div>
             </Link>