From ac258ea95b162b64b82095b6805e1c01b9a2c183 Mon Sep 17 00:00:00 2001
From: Nico Haider <nico@td-haider.at>
Date: Tue, 14 Apr 2026 21:16:53 +0200
Subject: [PATCH] style(nav): styling new header

---
 app/page.tsx                 | 18 +++++++++++++++-
 components/custom/navbar.tsx | 41 ++++++++++++++++++------------------
 2 files changed, 38 insertions(+), 21 deletions(-)

diff --git a/app/page.tsx b/app/page.tsx
index e972950..e7b0296 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -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>
   );
 }
diff --git a/components/custom/navbar.tsx b/components/custom/navbar.tsx
index a538a56..7ee06b1 100644
--- a/components/custom/navbar.tsx
+++ b/components/custom/navbar.tsx
@@ -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>
   )