refactor: simplify navbar layout and fix dev caching

sankalpaacharya · claude · sankalpaacharya · commit ae53aaad99fe · 2026-06-09T18:12:31.000+05:45
- Swap Header for SiteNavbar in root layout
- Center social icons in navbar with rounded states and CTA on the right
- Support icon/external link items in NavbarWithMenu
- Drop redundant hero heading and tidy ask-ai button sizing
- Skip immutable cache headers in development to keep HMR working

Co-Authored-By: Claude Opus 4.8 (1M context) &lt;noreply@anthropic.com&gt;
diff --git a/app/blog/[slug]/page.tsx b/app/blog/[slug]/page.tsx
@@ -122,7 +122,7 @@ export default async function BlogPost({
               <PostBanner slug={slug} topic={post.frontmatter.topic} />
 
               {/* Meta info - subtle and refined */}
-              <div className="flex items-center gap-3 mt-10 mb-6 text-xs text-muted-foreground/60 uppercase tracking-[0.15em]">
+              <div className="flex items-center justify-center gap-3 mt-10 mb-6 text-xs text-muted-foreground/60 uppercase tracking-[0.15em]">
                 <span>{post.frontmatter.topic}</span>
                 <span className="text-muted-foreground/30">·</span>
                 <span>
@@ -135,20 +135,20 @@ export default async function BlogPost({
               </div>
 
               {/* Title - clean, readable */}
-              <h1 className="text-3xl md:text-4xl font-semibold tracking-tight text-foreground mb-6 leading-[1.3] italic">
+              <h1 className="text-3xl md:text-4xl font-semibold tracking-tight text-foreground mb-6 leading-[1.3] italic text-center">
                 {post.frontmatter.title}
               </h1>
 
               {/* Description - subtle, refined */}
-              <p className="text-base text-foreground/60 leading-relaxed max-w-xl">
+              <p className="text-base text-foreground/60 leading-relaxed max-w-xl mx-auto text-center">
                 {post.frontmatter.description}
               </p>
 
               {/* Ask AI Buttons */}
               <AskAIButtons slug={slug} title={post.frontmatter.title} />
 
               {/* Elegant separator */}
-              <div className="mt-12 w-16 h-px bg-muted-foreground/20" />
+              <div className="mt-12 w-16 h-px bg-muted-foreground/20 mx-auto" />
             </header>
           </div>
         )}
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -2,7 +2,7 @@ import type React from "react";
 import type { Metadata } from "next";
 import { Geist, Geist_Mono, Poppins } from "next/font/google";
 import { Analytics } from "@vercel/analytics/next";
-import { Header } from "@/components/header";
+import { SiteNavbar } from "@/components/site-navbar";
 import "./globals.css";
 
 const _geist = Geist({ subsets: ["latin"] });
@@ -59,7 +59,7 @@ export default function RootLayout({
   return (
     <html lang="en" className={`dark ${poppins.variable}`}>
       <body className="font-sans antialiased min-h-screen">
-        <Header />
+        <SiteNavbar />
         {children}
         <Analytics />
       </body>
diff --git a/app/page.tsx b/app/page.tsx
@@ -21,11 +21,7 @@ export default function Home() {
     <main className="max-w-4xl mx-auto px-6 py-16">
       {/* Hero */}
       <section className="pt-6 pb-24 md:pt-12 md:pb-36">
-        <h1 className="text-4xl md:text-6xl font-bold tracking-tight leading-[1.05] text-foreground text-balance">
-          Reactjs maxxing
-        </h1>
-
-        <p className="mt-7 max-w-2xl text-base md:text-xl text-muted-foreground leading-relaxed md:leading-relaxed">
+        <p className="max-w-2xl text-base md:text-xl text-muted-foreground leading-relaxed md:leading-relaxed">
           Where I dig into how React actually works under the hood: Fiber,
           reconciliation, and server components. Find me on <HeroSocials />{" "}
           where I share deep dives every week.
diff --git a/components/blog/ask-ai-buttons.tsx b/components/blog/ask-ai-buttons.tsx
@@ -1,8 +1,5 @@
 "use client";
 
-import { HugeiconsIcon } from "@hugeicons/react";
-import { AiChat02Icon } from "@hugeicons/core-free-icons";
-
 interface AskAIButtonsProps {
   slug: string;
   title: string;
@@ -20,12 +17,12 @@ Help me understand the concepts explained in this article. Be ready to explain c
   const claudeUrl = `https://claude.ai/new?q=${encodedPrompt}`;
 
   return (
-    <div className="flex items-center gap-3 mt-8 pt-6 border-t border-muted-foreground/15">
+    <div className="flex items-center justify-center gap-3 mt-8 pt-6 border-t border-muted-foreground/15">
       <a
         href={chatGPTUrl}
         target="_blank"
         rel="noopener noreferrer"
-        className="inline-flex items-center gap-2 px-3 py-1.5 text-sm bg-muted/50 hover:bg-muted text-muted-foreground hover:text-foreground rounded-md transition-colors"
+        className="inline-flex min-w-28 items-center justify-center gap-2 px-3 py-1.5 text-sm bg-muted/50 hover:bg-muted text-muted-foreground hover:text-foreground rounded-md transition-colors"
       >
         <svg
           width="16"
@@ -42,29 +39,29 @@ Help me understand the concepts explained in this article. Be ready to explain c
         href={claudeUrl}
         target="_blank"
         rel="noopener noreferrer"
-        className="inline-flex items-center gap-2 px-3 py-1.5 text-sm bg-muted/50 hover:bg-muted text-muted-foreground hover:text-foreground rounded-md transition-colors"
+        className="inline-flex min-w-28 items-center justify-center gap-2 px-3 py-1.5 text-sm bg-muted/50 hover:bg-muted text-muted-foreground hover:text-foreground rounded-md transition-colors"
       >
         <img
           src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b0/Claude_AI_symbol.svg/960px-Claude_AI_symbol.svg.png"
           alt="Claude"
           width={16}
           height={16}
-          className="opacity-70"
+          className="h-4 w-4 shrink-0 object-contain opacity-70"
         />
         Claude
       </a>
       <a
         href="https://heygaia.io/c"
         target="_blank"
         rel="noopener noreferrer"
-        className="inline-flex items-center gap-2 px-3 py-1.5 text-sm bg-muted/50 hover:bg-muted text-muted-foreground hover:text-foreground rounded-md transition-colors"
+        className="inline-flex min-w-28 items-center justify-center gap-2 px-3 py-1.5 text-sm bg-muted/50 hover:bg-muted text-muted-foreground hover:text-foreground rounded-md transition-colors"
       >
         <img
           src="https://raw.githubusercontent.com/theexperiencecompany/gaia/10ddc7be52907bb2810114234418787aad257bd8/apps/web/public/brand/gaia_logo.svg"
           alt="Gaia"
           width={16}
           height={16}
-          className="opacity-70"
+          className="h-4 w-4 shrink-0 object-contain opacity-70"
         />
         Gaia
       </a>
diff --git a/components/navbar-withmenu.tsx b/components/navbar-withmenu.tsx
@@ -42,7 +42,13 @@ export interface NavbarMenuProps {
 export interface NavbarWithMenuProps {
   sections: NavbarMenuSection[];
   navItems?: Array<
-    | { type: "link"; label: string; href: string }
+    | {
+        type: "link";
+        label: string;
+        href: string;
+        icon?: React.ReactNode;
+        external?: boolean;
+      }
     | { type: "dropdown"; label: string; menu: string }
   >;
   logo?: React.ReactNode;
@@ -151,7 +157,7 @@ export function NavbarMenu({ activeMenu, sections }: NavbarMenuProps) {
   return (
     <div
       className={cn(
-        "absolute top-full left-0 z-40 w-full origin-top overflow-hidden border border-y-0 border-border bg-background/95 backdrop-blur-2xl outline-none",
+        "absolute top-full left-0 z-40 w-full origin-top overflow-hidden rounded-b-2xl border border-t-0 border-border bg-background/95 backdrop-blur-2xl outline-none",
       )}
     >
       <div className="p-6">
@@ -223,7 +229,7 @@ export function NavbarWithMenu({
         duration: shouldReduceMotion ? 0.35 : 0.8,
         ease: [0.2, 0.9, 0.24, 1],
       }}
-      className="sticky top-0 z-50 w-full"
+      className="sticky top-3 z-50 w-full"
     >
       {/* biome-ignore lint/a11y/noStaticElementInteractions: Hover container for menu, not interactive content */}
       <motion.div
@@ -232,7 +238,7 @@ export function NavbarWithMenu({
         onMouseLeave={handleNavbarMouseLeave}
         animate={{
           maxWidth: scrolled ? "56rem" : "100vw",
-          marginTop: scrolled ? 12 : 0,
+          marginTop: scrolled ? 12 : 8,
           paddingLeft: scrolled ? 16 : 0,
           paddingRight: scrolled ? 16 : 0,
         }}
@@ -246,12 +252,12 @@ export function NavbarWithMenu({
         <motion.div
           initial={false}
           className={cn(
-            "navbar_content flex h-14 w-full items-center justify-between border transition-colors duration-300",
+            "navbar_content relative flex h-14 w-full items-center justify-between border transition-[border-radius,background-color,border-color] duration-300",
             activeDropdown
-              ? "border-border border-b-transparent bg-background backdrop-blur-md"
+              ? "rounded-t-lg border-border border-b-transparent bg-background backdrop-blur-md"
               : scrolled
-                ? "border-border bg-card/40 backdrop-blur-md"
-                : "border-transparent bg-transparent",
+                ? "rounded-lg border-border bg-card/40 backdrop-blur-md"
+                : "rounded-none border-transparent bg-transparent",
           )}
           animate={{
             paddingLeft: scrolled ? 12 : 32,
@@ -276,20 +282,23 @@ export function NavbarWithMenu({
             )}
           </div>
 
-          <div className="hidden items-center gap-2 px-1 py-1 md:flex">
-            <div className="flex items-center gap-1">
+          {/* Center nav — social icons */}
+          <div className="absolute left-1/2 hidden -translate-x-1/2 items-center gap-1 md:flex">
             {items.map((item) =>
               item.type === "link" ? (
                 <Link
                   key={item.href}
                   href={item.href}
-                  className="relative flex h-9 cursor-pointer items-center px-4 py-2 text-sm text-foreground transition-colors hover:bg-foreground/5"
+                  target={item.external ? "_blank" : undefined}
+                  rel={item.external ? "noopener noreferrer" : undefined}
+                  aria-label={item.label}
+                  className="relative flex h-9 cursor-pointer items-center gap-2 rounded-lg px-3 py-2 text-sm text-foreground transition-colors hover:bg-foreground/5"
                   onMouseEnter={() => {
                     setHoveredItem(item.label.toLowerCase());
                     setActiveDropdown(null);
                   }}
                 >
-                  <span className="relative z-10">{item.label}</span>
+                  {item.icon ?? <span className="relative z-10">{item.label}</span>}
                 </Link>
               ) : (
                 <button
@@ -303,7 +312,8 @@ export function NavbarWithMenu({
                   )}
                   <div className="relative z-10 flex items-center gap-2">
                     <span>
-                      {item.label.charAt(0).toUpperCase() + item.label.slice(1)}
+                      {item.label.charAt(0).toUpperCase() +
+                        item.label.slice(1)}
                     </span>
                     <HugeiconsIcon
                       icon={ArrowDown01Icon}
@@ -317,10 +327,11 @@ export function NavbarWithMenu({
                 </button>
               ),
             )}
-            </div>
-            {cta}
           </div>
 
+          {/* Right — CTA (desktop) */}
+          <div className="hidden md:block">{cta}</div>
+
           <Sheet>
             <SheetTrigger asChild className="md:hidden">
               <Button variant="ghost" size="icon" aria-label="Open menu">
diff --git a/components/site-navbar.tsx b/components/site-navbar.tsx
@@ -2,51 +2,7 @@
 
 import Image from "next/image";
 import Link from "next/link";
-import { HugeiconsIcon } from "@hugeicons/react";
-import {
-  NewTwitterIcon,
-  LinkedinIcon,
-  GithubIcon,
-} from "@hugeicons/core-free-icons";
-import {
-  NavbarWithMenu,
-  type NavbarMenuSection,
-} from "@/components/navbar-withmenu";
-
-const sections: NavbarMenuSection[] = [
-  {
-    id: "socials",
-    gridLayout: "grid w-full grid-cols-1 gap-2",
-    links: [
-      {
-        label: "X (Twitter)",
-        href: "https://x.com/sankalpa_02",
-        external: true,
-        description: "Thoughts, threads & updates",
-        icon: <HugeiconsIcon icon={NewTwitterIcon} size={18} />,
-      },
-      {
-        label: "LinkedIn",
-        href: "https://linkedin.com/in/sankalpa02",
-        external: true,
-        description: "Professional profile",
-        icon: <HugeiconsIcon icon={LinkedinIcon} size={18} />,
-      },
-      {
-        label: "GitHub",
-        href: "https://github.com/sankalpaacharya",
-        external: true,
-        description: "Open source & projects",
-        icon: <HugeiconsIcon icon={GithubIcon} size={18} />,
-      },
-    ],
-  },
-];
-
-const navItems = [
-  { type: "link" as const, label: "Home", href: "/" },
-  { type: "dropdown" as const, label: "Socials", menu: "socials" },
-];
+import { NavbarWithMenu } from "@/components/navbar-withmenu";
 
 const logo = (
   <Link href="/" className="flex items-center gap-2.5">
@@ -72,11 +28,6 @@ const cta = (
 
 export function SiteNavbar() {
   return (
-    <NavbarWithMenu
-      sections={sections}
-      navItems={navItems}
-      logo={logo}
-      cta={cta}
-    />
+    <NavbarWithMenu sections={[]} navItems={[]} logo={logo} cta={cta} />
   );
 }
diff --git a/next.config.mjs b/next.config.mjs
@@ -28,6 +28,12 @@ const nextConfig = {
     ],
   },
   async headers() {
+    // Never send long-lived/immutable cache headers in development —
+    // the browser would hold onto stale dev chunks across HMR rebuilds,
+    // which breaks hot reload and forces manual cache clears.
+    if (process.env.NODE_ENV !== "production") {
+      return [];
+    }
     return [
       {
         // Cache all static assets in public folder for 1 year
