From 1cbdd68756cc22ede60424e6e74b91063297ab27 Mon Sep 17 00:00:00 2001
From: Mannu <manohar6839@gmail.com>
Date: Sun, 31 May 2026 02:22:16 +0530
Subject: [PATCH] =?UTF-8?q?fix(nav):=20mobile=20flex=20layout=20restored,?=
 =?UTF-8?q?=20desktop=203-col=20grid,=20gray=E2=86=92rose=20colors?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Layout:
- Mobile: flex layout unchanged — [Logo] ml-auto [About] [Auth]
- Desktop sm+: 3-col grid [1fr Logo | auto nav centered | 1fr Auth]
  achieved by flex→sm:grid responsive switch + sm:ml-0 on nav

Colors:
- Default: text-gray-600 font-normal (matches app theme, not rose)
- Hover: border-rose-300 + bg-rose-50 + text-rose-500 (border reserved
  via border-transparent at rest to prevent layout shift)
- Active: text-rose-600 font-medium (slight weight bump, not semibold)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/components/marketing/MarketingNav.tsx | 34 +++++++++++++++--------
 1 file changed, 22 insertions(+), 12 deletions(-)

diff --git a/src/components/marketing/MarketingNav.tsx b/src/components/marketing/MarketingNav.tsx
index 9ca1035..6691de4 100644
--- a/src/components/marketing/MarketingNav.tsx
+++ b/src/components/marketing/MarketingNav.tsx
@@ -6,10 +6,11 @@ import { NavAuthButton } from "./NavAuthButton";
 
 function navLinkClass(pathname: string, href: string) {
   const isActive = pathname === href || pathname.startsWith(href + "/");
+  // border-transparent always reserves the border space → no layout shift on hover
   const base = "text-sm px-3 py-1.5 rounded-full border transition-all duration-150";
   return isActive
-    ? `${base} font-semibold text-rose-600 border-transparent`
-    : `${base} font-medium text-rose-500 border-transparent hover:border-rose-300 hover:bg-rose-50 hover:text-rose-600`;
+    ? `${base} font-medium text-rose-600 border-transparent`
+    : `${base} font-normal text-gray-600 border-transparent hover:border-rose-300 hover:bg-rose-50 hover:text-rose-500`;
 }
 
 export function MarketingNav() {
@@ -17,10 +18,14 @@ export function MarketingNav() {
 
   return (
     <header className="sticky top-0 z-50 bg-white/95 backdrop-blur-md border-b border-rose-100 shadow-sm">
-      {/* 3-col grid: logo left · nav truly centered · auth right */}
-      <div className="max-w-5xl mx-auto px-5 py-3.5 grid grid-cols-[1fr_auto_1fr] items-center">
-        {/* Left: Logo */}
-        <Link href="/" className="flex items-center gap-2 group">
+      {/*
+        Mobile  → flex: [Logo] ····ml-auto···· [About] [Auth]
+        Desktop → 3-col grid: [Logo] [About · Blog] [Auth]
+      */}
+      <div className="max-w-5xl mx-auto px-5 py-3.5 flex items-center gap-2 sm:grid sm:grid-cols-[1fr_auto_1fr]">
+
+        {/* Logo */}
+        <Link href="/" className="flex items-center gap-2 group shrink-0">
           <span className="text-2xl transition-transform duration-200 group-hover:scale-110">🌸</span>
           <span
             className="text-xl font-bold text-gray-900 tracking-tight"
@@ -30,13 +35,13 @@ export function MarketingNav() {
           </span>
         </Link>
 
-        {/* Center: nav links */}
-        <nav className="flex items-center gap-0.5">
-          {/* About — always visible, including mobile */}
+        {/* Nav links
+            ml-auto on mobile (flex) pushes links to right, next to auth button
+            sm:ml-0 cancels that in grid mode (centering is handled by the grid) */}
+        <nav className="flex items-center gap-0.5 ml-auto sm:ml-0">
           <Link href="/about" className={navLinkClass(pathname, "/about")}>
             About
           </Link>
-          {/* Blog — desktop only */}
           <Link
             href="/blog"
             className={`hidden sm:inline-flex ${navLinkClass(pathname, "/blog")}`}
@@ -45,10 +50,15 @@ export function MarketingNav() {
           </Link>
         </nav>
 
-        {/* Right: auth button */}
-        <div className="flex justify-end">
+        {/* Auth button — justify-end so it hugs the right edge in grid col 3 */}
+        <div className="hidden sm:flex sm:justify-end">
           <NavAuthButton />
         </div>
+        {/* On mobile the auth button sits outside the grid, after the nav */}
+        <div className="sm:hidden shrink-0">
+          <NavAuthButton />
+        </div>
+
       </div>
     </header>
   );