elal
/
wychdev-nextjs
mirror of https://github.com/E-Almqvist/wychdev-nextjs
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Burger menu progress stuff

Browse Source
repocard
E. Almqvist 2 years ago
parent 8b29f48094
commit 00300117e5
4 changed files with 79 additions and 18 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 66
      components/burgermenu.tsx
  2. 6
      components/layout.tsx
  3. 10
      components/nav.tsx
  4. 15
      components/navlinks.tsx

66
components/burgermenu.tsx
Unescape View File

@ -1,10 +1,10 @@
import styled, {css} from "styled-components" import styled, {css} from "styled-components"
import React, {useState} from "react" import React, {useState} from "react"
//import Link from "next/link" import NavLinks from "./navlinks"
const MenuLine = styled.div` const MenuLine = styled.div`
width: 1.8rem; width: 1.8rem;
height: 2px; height: 3px;
border-radius: 2px; border-radius: 2px;
background-color: var(--fg); background-color: var(--fg);
&:not(:last-child) { &:not(:last-child) {
@ -39,9 +39,12 @@ const BurgerContainer = styled.div<{open: boolean}>`
} }
${({open}) => open && css` ${({open}) => open && css`
position: fixed;
right: 4rem;
z-index: 99;
div { div {
position: absolute; position: absolute;
height: 4px;
} }
div:nth-child(1) { 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 Menu = () => {
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
return ( return (
<BurgerContainer open={open} onClick={() => setOpen(!open)}> <>
<MenuLine /> <BNav show={open} />
<MenuLine /> <BurgerContainer open={open} onClick={() => setOpen(!open)}>
<MenuLine /> <MenuLine />
</BurgerContainer> <MenuLine />
<MenuLine />
</BurgerContainer>
</>
) )
} }

6
components/layout.tsx
Unescape View File

@ -4,15 +4,15 @@ import {ReactNode} from "react"
import Head from "next/head" import Head from "next/head"
const Layout = ({children}: {children: ReactNode}) => { const Layout = ({children}: {children: ReactNode}) => {
return <> return (<>
<Head> <Head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>wych.dev</title> <title>wych.dev</title>
</Head> </Head>
<Header /> <Header />
<main>{children}</main> <main>{children}</main>
<Footer /> <Footer />
</> </>)
} }
export default Layout export default Layout

10
components/nav.tsx
Unescape View File

@ -1,5 +1,5 @@
import styled from 'styled-components' import styled from "styled-components"
import ActiveLink from './activelink' import NavLinks from "./navlinks"
const NavCont = styled.nav` const NavCont = styled.nav`
display: flex; display: flex;
@ -26,11 +26,7 @@ const NavCont = styled.nav`
const Nav = () => { const Nav = () => {
return ( return (
<NavCont> <NavCont>
<ActiveLink href="/">About</ActiveLink> <NavLinks />
<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>
</NavCont> </NavCont>
) )
} }

15
components/navlinks.tsx
Unescape View File

@ -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
Write Preview
Loading…
Cancel
Save