nico/byhaider-homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(nav): styling new header

Browse Source
This commit is contained in:
Nico Haider
2026-04-14 21:16:53 +02:00
parent 526603dc63
commit ac258ea95b
2 changed files with 38 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/page.tsx
+17 -1
View File
@@ -1,6 +1,22 @@
export default function Home() {
return (
<div className="flex flex-col flex-1">
<div className="flex flex-col flex-1 h-[2000px]">
<h1 className="text-center">Test</h1>
<h1 className="text-center">Test</h1>
<h1 className="text-center">Test</h1>
<h1 className="text-center">Test</h1>
<h1 className="text-center">Test</h1>
<h1 className="text-center">Test</h1>
<h1 className="text-center">Test</h1>
<h1 className="text-center">Test</h1>
<h1 className="text-center">Test</h1>
<h1 className="text-center">Test</h1>
<h1 className="text-center">Test</h1>
<h1 className="text-center">Test</h1>
<h1 className="text-center">Test</h1>
<h1 className="text-center">Test</h1>
<h1 className="text-center">Test</h1>
<h1 className="text-center">Test</h1>
</div>
);
}
components/custom/navbar.tsx
+19 -18
View File
@@ -9,49 +9,50 @@ export default function Navbar() {
useEffect(() => {
const onScroll = () => setScrolled(window.scrollY > 10)
onScroll()
window.addEventListener("scroll", onScroll)
return () => window.removeEventListener("scroll", onScroll)
}, [])
return (
<header className="fixed top-0 left-0 w-full z-50 flex justify-center pt-4">
<header className="sticky top-0 left-0 w-full z-50 flex justify-center p-10">
<nav
className={cn(
"flex items-center transition-all duration-500",
"flex-1 flex items-center justify-between px-7 py-4 rounded-full transition-all duration-700",
scrolled
? `
px-6 py-3
bg-[rgba(37,37,37,0.6)]
backdrop-blur-[10px]
rounded-full
shadow-[0_20px_60px_rgba(0,0,0,0.65)]
ring-1 ring-white/10
`
: `
px-6 py-3
bg-transparent
`
? [
"border border-foreground/10",
"backdrop-blur-xl backdrop-saturate-150",
"shadow-[0_4px_24px_-4px_hsl(0_0%_0%/0.12),inset_0_1px_0_0_hsl(0_0%_100%/0.12)]",
].join(" ")
: "border-transparent bg-transparent"
)}
>
<ul className="flex items-center gap-8 text-sm text-white/80">
<h1 className={cn("text-4xl font-medium")}>bH</h1>
<ul className="flex items-center gap-8 text-sm text-foreground/60">
<li>
<Link href="/" className="hover:text-white transition">
<Link href="/" className="hover:text-foreground transition">
Home
</Link>
</li>
<li>
<Link href="/about" className="hover:text-white transition">
<Link href="/about" className="hover:text-foreground transition">
About Me
</Link>
</li>
<li>
<Link href="/projects" className="hover:text-white transition">
<Link href="/projects" className="hover:text-foreground transition">
Projects
</Link>
</li>
</ul>
<div></div>
</nav>
</header>
)