mirror of
https://github.com/cupcakearmy/fantus.git
synced 2024-11-04 06:24:14 +01:00
mobile menu
This commit is contained in:
parent
c6e14d3d97
commit
193f7aaf1f
@ -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>
|
Before Width: | Height: | Size: 326 B |
1
public/assets/menu.svg
Normal file
1
public/assets/menu.svg
Normal file
@ -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>
|
After Width: | Height: | Size: 1.1 KiB |
@ -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>
|
||||
|
@ -11,7 +11,7 @@ $mb=3em
|
||||
|
||||
&>*
|
||||
color: white
|
||||
max-width: 45em
|
||||
max-width: 40em
|
||||
margin: 0 auto
|
||||
padding: 1em 1.5em
|
||||
width: 100%
|
||||
|
@ -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
|
@ -1,3 +1,5 @@
|
||||
$mobile-width = 40rem
|
||||
|
||||
underline()
|
||||
transition: all linear 100ms
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user