Merge branch 'burgermenu'

2 years ago · edb7284aa6
parent 34d52616ed 05023bbcb5
commit edb7284aa6
5 changed files with 93 additions and 7 deletions
--- a/components/burgermenu.tsx
+++ 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 (
+		<BurgerContainer open={open} onClick={() => setOpen(!open)}>
+				<MenuLine />
+				<MenuLine />
+				<MenuLine />
+		</BurgerContainer>
+	)
+}
+
+export default Menu
--- 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 = () => {
 		<HeaderCont>
 			<h1><Link href="/">wych.dev</Link></h1>
 			<Nav />
+			<Menu />
 		</HeaderCont>
 	)
 }
--- a/components/layout.tsx
+++ b/components/layout.tsx
@ -1,9 +1,14 @@
-import Header from './header'
-import Footer from './footer'
-import {ReactNode} from 'react'
+import Header from "./header"
+import Footer from "./footer"
+import {ReactNode} from "react"
+import Head from "next/head"

 const Layout = ({children}: {children: ReactNode}) => {
 	return <>
+		<Head>
+			<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+			<title>wych.dev</title>
+		</Head>
 		<Header />
 			<main>{children}</main>
 		<Footer />
--- a/components/nav.tsx
+++ b/components/nav.tsx
@ -15,6 +15,12 @@ const NavCont = styled.nav`
 	a:hover {
 		opacity: .4;
 	}
+
+	@media screen and (max-width: 960px) {
+		display: none;
+		position: absolute;
+		top: 0;
+	}
 `

 const Nav = () => {
@ -24,7 +30,7 @@ const Nav = () => {
 			<ActiveLink href="/#contact">Contact</ActiveLink>
 			<ActiveLink href="/projects">Projects</ActiveLink>
 			<a href="https://github.com/E-Almqvist" target="_blank" rel="noreferrer">GitHub</a>
-			<a href="https://git.wych.dev">WychGit</a>
+			<a href="https://git.wych.dev" target="_blank" rel="noreferrer">WychGit</a>
 		</NavCont>
 	)
 }
--- a/styles/globals.css
+++ b/styles/globals.css
@ -17,7 +17,7 @@
 	--fg-link: #abf;
 	--fg-code: #ffbe85;
 	--fg-gold: #fff190;
-	--emph-shadow: 0 0 4px;
+	--emph-shadow: 0 0 2px;

 	--bg: #272a34;
 	--bg-dark: #21242b; 
@ -67,3 +67,4 @@ em {
 	font-style: normal;
 	text-shadow: var(--emph-shadow) currentColor;
 }
+