Portfolio website written with Next.js
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
|
|
|
|
import styled from "styled-components"
|
|
|
|
|
import Nav from "./nav"
|
|
|
|
|
import Link from "next/link"
|
|
|
|
|
import Menu from "./burgermenu"
|
|
|
|
|
|
|
|
|
|
const HeaderCont = styled.header`
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
border-bottom: var(--border-size) var(--border-type) var(--border-color);
|
|
|
|
|
padding: .8rem 2rem;
|
|
|
|
|
gap: 2rem;
|
|
|
|
|
|
|
|
|
|
h1 {
|
|
|
|
|
font-weight: normal;
|
|
|
|
|
|
|
|
|
|
a {
|
|
|
|
|
color: inherit;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
nav {
|
|
|
|
|
margin-left: auto;
|
|
|
|
|
float: right;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@media screen and (max-width: 960px) {
|
|
|
|
|
padding: 1rem 2rem;
|
|
|
|
|
}
|
|
|
|
|
`
|
|
|
|
|
|
|
|
|
|
const Header = () => {
|
|
|
|
|
return (
|
|
|
|
|
<HeaderCont>
|
|
|
|
|
<h1><Link href="/">wych.dev</Link></h1>
|
|
|
|
|
<Nav />
|
|
|
|
|
<Menu />
|
|
|
|
|
</HeaderCont>
|
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export default Header
|
