From 00300117e5e8c251a249f1930263dc5cfc64c913 Mon Sep 17 00:00:00 2001 From: "E. Almqvist" Date: Sat, 9 Jul 2022 19:23:14 +0200 Subject: [PATCH] Burger menu progress stuff --- components/burgermenu.tsx | 66 ++++++++++++++++++++++++++++++++++----- components/layout.tsx | 6 ++-- components/nav.tsx | 10 ++---- components/navlinks.tsx | 15 +++++++++ 4 files changed, 79 insertions(+), 18 deletions(-) create mode 100644 components/navlinks.tsx diff --git a/components/burgermenu.tsx b/components/burgermenu.tsx index edd7685..1b75a84 100644 --- 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 ( + + + + ) +} + const Menu = () => { const [open, setOpen] = useState(false); return ( - setOpen(!open)}> - - - - + <> + + setOpen(!open)}> + + + + + ) } diff --git a/components/layout.tsx b/components/layout.tsx index 4016b61..2445dcf 100644 --- 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 (<> wych.dev
-
{children}
+
{children}