refactor: simplify Breadcrumb with CSS sticky positioning

Remove client-side JavaScript scroll handling in favor of pure CSS
sticky positioning for better performance and simplicity.

- Remove useState and useEffect hooks for scroll detection
- Replace dynamic sticky behavior with CSS position: sticky
- Eliminate client-side header height calculations
- Convert from 'use client' to server component compatible code

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

Co-Authored-By: Claude <noreply@anthropic.com>

Author: ericyangpan

src/components/controls/Breadcrumb.tsx

@@ -1,6 +1,3 @@
-'use client'
-
-import { useEffect, useRef, useState } from 'react'
 import { JsonLd } from '@/components/JsonLd'
 import { Link } from '@/i18n/navigation'
 import { SITE_CONFIG } from '@/lib/metadata/config'
@@ -14,32 +11,9 @@ export interface BreadcrumbItem {
  * Renders a breadcrumb navigation bar and injects a Schema.org BreadcrumbList via JsonLd.
  * - Visual trail is rendered from provided items; the last item is shown as plain text.
  * - Structured data includes "Home" at the first position for better SEO.
- * - Sticky behavior is enabled when scrolling.
+ * - Sticky behavior is enabled when scrolling using CSS position: sticky.
  */
 export function Breadcrumb({ items }: { items: BreadcrumbItem[] }) {
-  const breadcrumbRef = useRef<HTMLDivElement>(null)
-  const [isBreadcrumbFixed, setIsBreadcrumbFixed] = useState(false)
-  const [headerHeight, setHeaderHeight] = useState(0)
-
-  useEffect(() => {
-    const handleScroll = () => {
-      if (!breadcrumbRef.current) return
-      const header = document.querySelector('header')
-      const currentHeaderHeight = header?.offsetHeight || 0
-      setHeaderHeight(currentHeaderHeight)
-      const breadcrumbTop = breadcrumbRef.current.offsetTop
-      setIsBreadcrumbFixed(window.scrollY > breadcrumbTop - currentHeaderHeight)
-    }
-
-    window.addEventListener('scroll', handleScroll)
-    window.addEventListener('resize', handleScroll)
-    handleScroll()
-
-    return () => {
-      window.removeEventListener('scroll', handleScroll)
-      window.removeEventListener('resize', handleScroll)
-    }
-  }, [])
   // Normalize href to ensure it starts with '/' (unless it's already an absolute URL)
   const normalizeHref = (href: string): string => {
     // If it's already an absolute URL or starts with '/', return as is
@@ -74,51 +48,40 @@ export function Breadcrumb({ items }: { items: BreadcrumbItem[] }) {
     itemListElement: schemaItems,
   } as const
 
-  const BreadcrumbContent = () => (
-    <section
-      className="py-[var(--spacing-sm)] bg-[var(--color-hover)] border-b border-[var(--color-border)]"
-      data-breadcrumb
-    >
-      <div className="max-w-8xl mx-auto px-[var(--spacing-md)]">
-        <nav className="flex items-center gap-[var(--spacing-xs)] text-sm pl-[var(--spacing-xs)]">
-          {items.map((item, index) => {
-            const isLast = index === items.length - 1
-            const normalizedHref = normalizeHref(item.href)
-            return (
-              <span
-                key={`${item.href}-${index}`}
-                className="inline-flex items-center gap-[var(--spacing-xs)]"
-              >
-                {isLast ? (
-                  <span className="text-[var(--color-text)] font-medium">{item.name}</span>
-                ) : (
-                  <Link
-                    href={normalizedHref}
-                    className="text-[var(--color-text-secondary)] hover:text-[var(--color-text)] transition-colors"
-                  >
-                    {item.name}
-                  </Link>
-                )}
-                {!isLast && <span className="text-[var(--color-text-muted)]">/</span>}
-              </span>
-            )
-          })}
-        </nav>
-      </div>
-    </section>
-  )
-
   return (
     <>
       <JsonLd data={breadcrumbListSchema} />
-      {isBreadcrumbFixed && (
-        <div className="fixed left-0 right-0 z-40 shadow-sm" style={{ top: `${headerHeight}px` }}>
-          <BreadcrumbContent />
+      <section
+        className="sticky top-[4rem] z-40 py-[var(--spacing-sm)] bg-[var(--color-hover)] border-b border-[var(--color-border)] shadow-sm"
+        data-breadcrumb
+      >
+        <div className="max-w-8xl mx-auto px-[var(--spacing-md)]">
+          <nav className="flex items-center gap-[var(--spacing-xs)] text-sm pl-[var(--spacing-xs)]">
+            {items.map((item, index) => {
+              const isLast = index === items.length - 1
+              const normalizedHref = normalizeHref(item.href)
+              return (
+                <span
+                  key={`${item.href}-${index}`}
+                  className="inline-flex items-center gap-[var(--spacing-xs)]"
+                >
+                  {isLast ? (
+                    <span className="text-[var(--color-text)] font-medium">{item.name}</span>
+                  ) : (
+                    <Link
+                      href={normalizedHref}
+                      className="text-[var(--color-text-secondary)] hover:text-[var(--color-text)] transition-colors"
+                    >
+                      {item.name}
+                    </Link>
+                  )}
+                  {!isLast && <span className="text-[var(--color-text-muted)]">/</span>}
+                </span>
+              )
+            })}
+          </nav>
         </div>
-      )}
-      <div ref={breadcrumbRef} className={isBreadcrumbFixed ? 'invisible' : ''}>
-        <BreadcrumbContent />
-      </div>
+      </section>
     </>
   )
 }