nav

src/Header/Component.client.tsx

@@ -19,14 +19,15 @@ function ToggleButton() {
   return (
     <button
       onClick={toggle}
-      aria-label="Toggle theme"
-      className="flex items-center justify-center w-8 h-8 rounded-full transition-colors text-foreground/50 hover:text-foreground/80 hover:bg-foreground/8"
+      className="flex items-center gap-2 rounded-full border px-3 py-1.5 text-xs transition-all"
+      style={{
+        border: isDark ? '1px solid rgba(255,255,255,0.2)' : '1px solid rgba(0,0,0,0.15)',
+        color: isDark ? 'rgba(255,255,255,0.7)' : 'rgba(0,0,0,0.6)',
+        background: 'transparent',
+        cursor: 'pointer',
+      }}
     >
-      {isDark ? (
-        <i className="ti ti-sun" style={{ fontSize: 16 }} />
-      ) : (
-        <i className="ti ti-moon" style={{ fontSize: 16 }} />
-      )}
+      {isDark ? '☀ Light' : '☾ Dark'}
     </button>
   )
 }
@@ -47,22 +48,15 @@ export const HeaderClient: React.FC<HeaderClientProps> = ({ data }) => {
   }, [headerTheme])
 
   return (
-    <header
-      className="fixed top-0 left-0 right-0 z-50 flex justify-center pt-4 pointer-events-none"
-      {...(theme ? { 'data-theme': theme } : {})}
-    >
-      <div className="pointer-events-auto flex items-center gap-6 px-5 py-2.5 rounded-full border border-foreground/10 bg-background/70 backdrop-blur-md shadow-sm">
-        <Link href="/" className="shrink-0">
-          <Logo loading="eager" priority="high" className="invert dark:invert-0 h-6 w-auto" />
+    <header className="container relative z-20" {...(theme ? { 'data-theme': theme } : {})}>
+      <div className="py-8 flex justify-between">
+        <Link href="/">
+          <Logo loading="eager" priority="high" className="invert dark:invert-0" />
         </Link>
-
-        <div className="w-px h-4 bg-foreground/10" />
-
-        <HeaderNav data={data} />
-
-        <div className="w-px h-4 bg-foreground/10" />
-
-        <ToggleButton />
+        <div className="flex items-center gap-3">
+          <HeaderNav data={data} />
+          <ToggleButton />
+        </div>
       </div>
     </header>
   )

src/Header/Nav/index.tsx

@@ -10,10 +10,17 @@ export const HeaderNav: React.FC<{ data: HeaderType }> = ({ data }) => {
   const navItems = data?.navItems || []
 
   return (
-    <nav className="flex gap-3 items-center">
+    <nav className="flex gap-1 items-center">
       {navItems.map(({ link }, i) => {
-        return <CMSLink key={i} {...link} appearance="link" />
+        return (
+          <CMSLink
+            key={i}
+            {...link}
+            appearance="link"
+            className="px-4 py-2 rounded-xl text-sm text-foreground/60 hover:text-foreground hover:bg-foreground/10 transition-all"
+          />
+        )
       })}
     </nav>
   )
-}
+}