diff --git a/components/burgermenu.tsx b/components/burgermenu.tsx new file mode 100644 index 0000000..edd7685 --- /dev/null +++ b/components/burgermenu.tsx @@ -0,0 +1,72 @@ +import styled, {css} from "styled-components" +import React, {useState} from "react" +//import Link from "next/link" + +const MenuLine = styled.div` + width: 1.8rem; + height: 2px; + border-radius: 2px; + background-color: var(--fg); + &:not(:last-child) { + margin-bottom: .4rem; + } +` + +const BurgerContainer = styled.div<{open: boolean}>` + display: none; + width: 1.8rem; + height: 1.8rem; + flex-direction: column; + justify-content: center; + margin-left: auto; + + div { + transition: .2s; + } + + &:hover { + cursor: pointer; + } + + @media screen and (max-width: 960px) { + display: flex; + + nav { + display: none !important; + position: absolute; + top: 0; + } + } + + ${({open}) => open && css` + div { + position: absolute; + height: 4px; + } + + div:nth-child(1) { + transform: rotate(45deg) translate(.2rem, .2rem); + } + + div:nth-child(2) { + transform: rotate(-45deg) translate(-.18rem, .2rem); + } + + div:last-child { + display: none; + } + `} +` + +const Menu = () => { + const [open, setOpen] = useState(false); + return ( + setOpen(!open)}> + + + + + ) +} + +export default Menu diff --git a/components/header.tsx b/components/header.tsx index 4317d96..6bb9b00 100644 --- a/components/header.tsx +++ b/components/header.tsx @@ -1,6 +1,7 @@ -import styled from 'styled-components' -import Nav from './nav' +import styled from "styled-components" +import Nav from "./nav" import Link from "next/link" +import Menu from "./burgermenu" const HeaderCont = styled.header` display: flex; @@ -28,6 +29,7 @@ const Header = () => {

wych.dev