Burger menu progress stuff

2 years ago · 00300117e5
parent 8b29f48094
commit 00300117e5
4 changed files with 79 additions and 18 deletions
--- a/components/burgermenu.tsx
+++ b/components/burgermenu.tsx
@ -1,10 +1,10 @@
 import styled, {css} from "styled-components"
 import React, {useState} from "react"
-//import Link from "next/link"
+import NavLinks from "./navlinks"

 const MenuLine = styled.div`
 	width: 1.8rem;
-	height: 2px;
+	height: 3px;
 	border-radius: 2px;
 	background-color: var(--fg);
 	&:not(:last-child) {
@ -39,9 +39,12 @@ const BurgerContainer = styled.div<{open: boolean}>`
 	}

 	${({open}) => open && css`
+		position: fixed;
+		right: 4rem;
+		z-index: 99;
+
 		div {
 			position: absolute;
-			height: 4px;
 		}

 		div:nth-child(1) {
@ -58,14 +61,61 @@ const BurgerContainer = styled.div<{open: boolean}>`
 	`}
 `

+const BNavCont = styled.nav<{show: boolean}>`
+	display: none;
+	backdrop-filter: blur(25px);
+	position: fixed;
+	flex-direction: column;
+	background: #222a;
+	left: 0;
+	top: 0;
+	width: 100vw;
+	height: 100vh;
+	z-index: 2;
+
+	align-items: center;
+	justify-content: center;
+
+	gap: 1.5rem;
+	font-size: 1.2rem;
+	border: unset;
+
+	a {
+		font-size: 2rem;
+		color: var(--fg-button);
+		transition: var(--trans-time) opacity;
+		text-align: center;
+	}
+
+	a:hover {
+		opacity: .4;
+	}
+
+
+	${({show}) => show && css`
+		display: flex;
+	`}
+`
+
+const BNav: React.FC<{show: boolean}> = ({show}) => {
+	return (
+		<BNavCont show={show}>
+			<NavLinks />
+		</BNavCont>
+	)
+}
+
 const Menu = () => {
 	const [open, setOpen] = useState(false);
 	return (
-		<BurgerContainer open={open} onClick={() => setOpen(!open)}>
-				<MenuLine />
-				<MenuLine />
-				<MenuLine />
-		</BurgerContainer>
+		<>
+			<BNav show={open} />
+			<BurgerContainer open={open} onClick={() => setOpen(!open)}>
+					<MenuLine />
+					<MenuLine />
+					<MenuLine />
+			</BurgerContainer>
+		</>
 	)
 }

--- a/components/layout.tsx
+++ b/components/layout.tsx
@ -4,15 +4,15 @@ import {ReactNode} from "react"
 import Head from "next/head"

 const Layout = ({children}: {children: ReactNode}) => {
-	return <>
+	return (<>
 		<Head>
 			<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 			<title>wych.dev</title>
 		</Head>
 		<Header />
-			<main>{children}</main>
+		<main>{children}</main>
 		<Footer />
-	</>
+	</>)
 }

 export default Layout
--- a/components/nav.tsx
+++ b/components/nav.tsx
@ -1,5 +1,5 @@
-import styled from 'styled-components'
-import ActiveLink from './activelink'
+import styled from "styled-components"
+import NavLinks from "./navlinks"

 const NavCont = styled.nav`
 	display: flex;
@ -26,11 +26,7 @@ const NavCont = styled.nav`
 const Nav = () => {
 	return (
 		<NavCont>
-			<ActiveLink href="/">About</ActiveLink>
-			<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" target="_blank" rel="noreferrer">WychGit</a>
+			<NavLinks />
 		</NavCont>
 	)
 }
--- a/components/navlinks.tsx
+++ b/components/navlinks.tsx
@ -0,0 +1,15 @@
+import ActiveLink from "./activelink"
+
+const NavLinks = () => {
+	return (
+		<>
+			<ActiveLink href="/">About</ActiveLink>
+			<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" target="_blank" rel="noreferrer">WychGit</a>
+		</>
+	)
+}
+
+export default NavLinks