header

src/Footer/Component.tsx

@@ -1,29 +1,29 @@
 import { getCachedGlobal } from '@/utilities/getGlobals'
-import Link from 'next/link'
 import React from 'react'
 
 import { CMSLink } from '@/components/Link'
 
 export async function Footer() {
   const footerData = await getCachedGlobal('footer', 1)()
-
   const navItems = footerData?.navItems || []
 
   return (
-<footer className="mt-auto border-t border-foreground/10 relative z-10">
-  <div className="container py-8 flex flex-col items-center gap-4">
+    <footer className="mt-auto relative z-10">
+      <div className="container py-8 flex flex-col sm:flex-row items-center justify-between gap-4">
+        <p className="text-foreground/30 text-xs">&copy; {new Date().getFullYear()} ByMackie</p>
 
-    <nav className="flex flex-wrap justify-center gap-6">
-      {navItems.map(({ link }, i) => {
-        return <CMSLink className="text-foreground/60 hover:text-foreground transition-colors text-sm" key={i} {...link} />
-      })}
-    </nav>
-
-    <p className="text-foreground/40 text-sm text-center">
-      &copy; {new Date().getFullYear()} ByMackie. All rights reserved.
-    </p>
-
-  </div>
-</footer>
+        {navItems.length > 0 && (
+          <nav className="flex flex-wrap justify-center gap-5">
+            {navItems.map(({ link }, i) => (
+              <CMSLink
+                key={i}
+                {...link}
+                className="text-foreground/40 hover:text-foreground/70 transition-colors text-xs"
+              />
+            ))}
+          </nav>
+        )}
+      </div>
+    </footer>
   )
-}
+}

src/Header/Component.client.tsx

@@ -19,15 +19,14 @@ function ToggleButton() {
   return (
     <button
       onClick={toggle}
-      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',
-      }}
+      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"
     >
-      {isDark ? '☀ Light' : '☾ Dark'}
+      {isDark ? (
+        <i className="ti ti-sun" style={{ fontSize: 16 }} />
+      ) : (
+        <i className="ti ti-moon" style={{ fontSize: 16 }} />
+      )}
     </button>
   )
 }
@@ -48,15 +47,22 @@ export const HeaderClient: React.FC<HeaderClientProps> = ({ data }) => {
   }, [headerTheme])
 
   return (
-    <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" />
+    <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" />
         </Link>
-        <div className="flex items-center gap-3">
-          <HeaderNav data={data} />
-          <ToggleButton />
-        </div>
+
+        <div className="w-px h-4 bg-foreground/10" />
+
+        <HeaderNav data={data} />
+
+        <div className="w-px h-4 bg-foreground/10" />
+
+        <ToggleButton />
       </div>
     </header>
   )