93 lines
1.8 KiB
TypeScript
93 lines
1.8 KiB
TypeScript
"use client"
|
|
|
|
import styled, { keyframes } from "styled-components"
|
|
import Logo from "@/icons/logo"
|
|
import Link from "next/link"
|
|
|
|
const NavbarContainer = styled.nav`
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 1rem 2rem;
|
|
background-color: rgba(var(--background), 0.5);
|
|
backdrop-filter: blur(10px);
|
|
position: absolute;
|
|
width: calc(100% - 4rem);
|
|
margin: 2rem;
|
|
border-radius: 1rem;
|
|
z-index: 100;
|
|
|
|
ul {
|
|
display: flex;
|
|
gap: 2rem;
|
|
li {
|
|
list-style: none;
|
|
font-size: 1.5rem;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
|
|
a {
|
|
text-decoration: none;
|
|
color: rgba(var(--black), 0.7);
|
|
transition: color 0.2s;
|
|
font-weight: 400;
|
|
&:hover {
|
|
color: rgba(var(--black), 1);
|
|
}
|
|
|
|
&.active {
|
|
color: rgba(var(--white), 1);
|
|
font-weight: 600;
|
|
text-shadow: 0 4px 5px rgba(var(--black), 0.5);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
svg {
|
|
width: 4rem;
|
|
height: 4rem;
|
|
}
|
|
`
|
|
|
|
const LogoWrapper = styled.div`
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
|
|
h1 {
|
|
font-size: 2.5rem;
|
|
font-weight: 600;
|
|
color: rgb(var(--white));
|
|
text-shadow: 0 4px 5px rgba(var(--black), 0.5);
|
|
}
|
|
`
|
|
|
|
const Navbar = () => {
|
|
return (
|
|
<NavbarContainer>
|
|
<LogoWrapper>
|
|
<Logo />
|
|
<h1>HangerThem</h1>
|
|
</LogoWrapper>
|
|
<ul>
|
|
<li>
|
|
<Link href="/" className="active">
|
|
Home
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link href="#about">About</Link>
|
|
</li>
|
|
<li>
|
|
<Link href="#projects">Projects</Link>
|
|
</li>
|
|
<li>
|
|
<Link href="#contact">Contact me</Link>
|
|
</li>
|
|
</ul>
|
|
</NavbarContainer>
|
|
)
|
|
}
|
|
|
|
export default Navbar
|