mobile menu

assets/menu.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M432 176H80c-8.8 0-16-7.2-16-16s7.2-16 16-16h352c8.8 0 16 7.2 16 16s-7.2 16-16 16zM432 272H80c-8.8 0-16-7.2-16-16s7.2-16 16-16h352c8.8 0 16 7.2 16 16s-7.2 16-16 16zM432 368H80c-8.8 0-16-7.2-16-16s7.2-16 16-16h352c8.8 0 16 7.2 16 16s-7.2 16-16 16z"/></svg>

public/assets/menu.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;"><path d="M448,145.666c0,-0.92 -0.746,-1.666 -1.666,-1.666l-380.668,0c-0.92,0 -1.666,0.746 -1.666,1.666l0,28.358c0,0.919 0.746,1.666 1.666,1.666l380.668,0c0.92,0 1.666,-0.747 1.666,-1.666l0,-28.358Z" style="fill:#fff;"/><path d="M448,337.976c0,-0.919 -0.746,-1.666 -1.666,-1.666l-380.668,0c-0.92,0 -1.666,0.747 -1.666,1.666l0,28.358c0,0.92 0.746,1.666 1.666,1.666l380.668,0c0.92,0 1.666,-0.746 1.666,-1.666l0,-28.358Z" style="fill:#fff;"/><path d="M448,241.821c0,-0.92 -0.746,-1.666 -1.666,-1.666l-380.668,0c-0.92,0 -1.666,0.746 -1.666,1.666l0,28.358c0,0.92 0.746,1.666 1.666,1.666l380.668,0c0.92,0 1.666,-0.746 1.666,-1.666l0,-28.358Z" style="fill:#fff;"/></svg>

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>

styles/content.styl

@@ -11,7 +11,7 @@ $mb=3em
 
     &>*
         color: white
-        max-width: 45em
+        max-width: 40em
         margin: 0 auto
         padding: 1em 1.5em
         width: 100%

styles/menu.styl

@@ -1,3 +1,5 @@
+@require './utils.styl'
+
 $foregound=#ffffff
 
 menu-item-hover()
@@ -16,13 +18,21 @@ nav.main
     background: rgb(0,0,0)
     background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 50%)
 
-    .left
+    #icon
+        height: 2.5em
+        width: 2.5em
+        object-fit: contain
+        z-index 10
+        cursor pointer
+        display: none
+
+    .home
         color: $foregound
         font-weight: bold
         font-size: 2em
         cursor pointer
 
-    .right
+    .links
         &>div
             color: $foregound
             padding: .5em 0.75em
@@ -37,3 +47,32 @@ nav.main
         &:not(:hover)
             &>.active
                 menu-item-hover()
+        
+        >.home
+            display: none
+
+@media (max-width: $mobile-width)
+    nav.main
+        #icon
+            display: initial
+            
+        .links
+            position: fixed
+            display: none
+            top: 0
+            left: 0
+            background: rgba(0, 0, 0, 1)
+            height: 100vh
+            width: 100vw
+            flex-direction: column
+            align-items: center
+            justify-content: center
+
+            &.open
+                display: flex
+
+            & .home
+                display: initial
+
+            &>div
+                margin: .5em 0

styles/utils.styl

@@ -1,3 +1,5 @@
+$mobile-width = 40rem
+
 underline()
     transition: all linear 100ms