From c548b9fc74cdbbb3eaa479c3758f41dc915e2ef2 Mon Sep 17 00:00:00 2001
From: Haitao Pan <manbuzhe2009@qq.com>
Date: Wed, 12 Nov 2025 11:29:56 +0800
Subject: [PATCH] feat(blog): add sticky navigation header
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add top navigation similar to dynamic product pages:
- SVC.plus/blog breadcrumb (clickable, returns to homepage)
- Search component on the right
- Sticky positioning with blur background

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 dashboard/src/app/blog/page.tsx | 35 +++++++++++++++++++++++----------
 1 file changed, 25 insertions(+), 10 deletions(-)

diff --git a/dashboard/src/app/blog/page.tsx b/dashboard/src/app/blog/page.tsx
index 1c91384..21d9150 100644
--- a/dashboard/src/app/blog/page.tsx
+++ b/dashboard/src/app/blog/page.tsx
@@ -52,15 +52,29 @@ export default async function BlogPage({ searchParams }: PageProps) {
   const paginatedPosts = posts.slice(startIndex, endIndex)
 
   return (
-    <main className="flex min-h-screen flex-col bg-slate-50">
-      <div className="mx-auto w-full max-w-6xl px-4 py-16">
-        <div className="mb-12">
-          <h1 className="text-4xl font-bold text-slate-900 mb-4">Blog</h1>
-          <p className="text-lg text-slate-600">
-            Latest updates, releases, and insights from the Cloud-Neutral community.
-          </p>
-          <SearchComponent variant="hero" className="mt-6" />
+    <div className="bg-white text-slate-900">
+      {/* Sticky Navigation Header */}
+      <header className="sticky top-0 z-30 border-b border-slate-200 bg-white/80 backdrop-blur">
+        <div className="mx-auto flex h-16 max-w-6xl items-center justify-between px-4 sm:px-6 lg:px-8">
+          <Link href="/" className="flex items-center gap-2 text-sm font-semibold">
+            <span className="text-slate-500">SVC.plus</span>
+            <span className="text-slate-400">/</span>
+            <span className="text-brand-dark">blog</span>
+          </Link>
+          <div className="flex items-center gap-3">
+            <SearchComponent className="relative w-full max-w-xs" />
+          </div>
         </div>
+      </header>
+
+      <main className="flex min-h-screen flex-col bg-slate-50">
+        <div className="mx-auto w-full max-w-6xl px-4 py-16">
+          <div className="mb-12">
+            <h1 className="text-4xl font-bold text-slate-900 mb-4">Blog</h1>
+            <p className="text-lg text-slate-600">
+              Latest updates, releases, and insights from the Cloud-Neutral community.
+            </p>
+          </div>
 
         {posts.length === 0 ? (
           <div className="text-center py-20">
@@ -154,7 +168,8 @@ export default async function BlogPage({ searchParams }: PageProps) {
             )}
           </>
         )}
-      </div>
-    </main>
+        </div>
+      </main>
+    </div>
   )
 }