From 193f7aaf1fb2595a8d5eda284ecf4ba64edbbf26 Mon Sep 17 00:00:00 2001
From: cupcakearmy <nicco.borgioli@gmail.com>
Date: Thu, 16 Jan 2020 00:35:39 +0100
Subject: [PATCH] mobile menu

---
 assets/menu.svg        |  1 -
 public/assets/menu.svg |  1 +
 screens/menu.tsx       | 31 +++++++++++++++++++++++-------
 styles/content.styl    |  2 +-
 styles/menu.styl       | 43 ++++++++++++++++++++++++++++++++++++++++--
 styles/utils.styl      |  2 ++
 6 files changed, 69 insertions(+), 11 deletions(-)
 delete mode 100644 assets/menu.svg
 create mode 100644 public/assets/menu.svg

diff --git a/assets/menu.svg b/assets/menu.svg
deleted file mode 100644
index 1b005ed..0000000
--- a/assets/menu.svg
+++ /dev/null
@@ -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>
\ No newline at end of file
diff --git a/public/assets/menu.svg b/public/assets/menu.svg
new file mode 100644
index 0000000..fc55c19
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/screens/menu.tsx b/screens/menu.tsx
index 08a5bbf..e9ac90d 100644
--- a/screens/menu.tsx
+++ b/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>
diff --git a/styles/content.styl b/styles/content.styl
index 3072ae8..355ef01 100644
--- a/styles/content.styl
+++ b/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%
diff --git a/styles/menu.styl b/styles/menu.styl
index 2b91d80..494c30c 100644
--- a/styles/menu.styl
+++ b/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
\ No newline at end of file
diff --git a/styles/utils.styl b/styles/utils.styl
index ac3f2b3..467b5a8 100644
--- a/styles/utils.styl
+++ b/styles/utils.styl
@@ -1,3 +1,5 @@
+$mobile-width = 40rem
+
 underline()
     transition: all linear 100ms