updateheader

src/Header/Component.client.tsx

@@ -8,35 +8,29 @@ import type { Header } from '@/payload-types'
 import { Logo } from '@/components/Logo/Logo'
 import { HeaderNav } from './Nav'
 import { useThemeMode } from '@/hooks/useThemeMode'
-import { Container } from '@/components/ui/Container'
 
-// 1. DEFINE THIS COMPONENT INSIDE THE FILE
 function ToggleButton() {
   const { isDark, toggle } = useThemeMode()
   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'}
+      <i className={isDark ? 'ti ti-sun' : 'ti ti-moon'} style={{ fontSize: 16 }} />
     </button>
   )
 }
 
-// 2. NOW HeaderClient CAN SEE ToggleButton
 export const HeaderClient: React.FC<{ data: Header }> = ({ data }) => {
   const [theme, setTheme] = useState<string | null>(null)
+  const [menuOpen, setMenuOpen] = useState(false)
   const { headerTheme, setHeaderTheme } = useHeaderTheme()
   const pathname = usePathname()
 
   useEffect(() => {
     setHeaderTheme(null)
+    setMenuOpen(false)
   }, [pathname, setHeaderTheme])
 
   useEffect(() => {
@@ -44,21 +38,39 @@ export const HeaderClient: React.FC<{ data: Header }> = ({ data }) => {
   }, [headerTheme, theme])
 
   return (
-    <header
-      className="relative z-20 border-b border-foreground/8"
-      {...(theme ? { 'data-theme': theme } : {})}
-    >
-      <Container>
-        <div className="py-8 flex justify-between items-center">
+    <header className="relative z-20" {...(theme ? { 'data-theme': theme } : {})}>
+      <div className="container">
+        <div className="py-5 flex justify-between items-center">
           <Link href="/">
             <Logo loading="eager" priority="high" className="invert dark:invert-0" />
           </Link>
-          <div className="flex items-center gap-3">
+
+          {/* Desktop nav */}
+          <div className="hidden md:flex items-center gap-3">
             <HeaderNav data={data} />
             <ToggleButton />
           </div>
+
+          {/* Mobile right side */}
+          <div className="flex md:hidden items-center gap-2">
+            <ToggleButton />
+            <button
+              onClick={() => setMenuOpen(!menuOpen)}
+              aria-label="Toggle menu"
+              className="flex items-center justify-center w-8 h-8 rounded-full text-foreground/50 hover:text-foreground/80 hover:bg-foreground/8 transition-colors"
+            >
+              <i className={menuOpen ? 'ti ti-x' : 'ti ti-menu-2'} style={{ fontSize: 18 }} />
+            </button>
+          </div>
         </div>
-      </Container>
+
+        {/* Mobile menu */}
+        {menuOpen && (
+          <div className="md:hidden pb-4 border-t border-foreground/8 pt-4 flex flex-col gap-1">
+            <HeaderNav data={data} />
+          </div>
+        )}
+      </div>
     </header>
   )
 }

src/Header/Nav/index.tsx

@@ -1,7 +1,6 @@
 'use client'
 
 import React from 'react'
-import { Container } from '@/components/ui/Container'
 import type { Header as HeaderType } from '@/payload-types'
 import { CMSLink } from '@/components/Link'
 
@@ -9,19 +8,15 @@ export const HeaderNav: React.FC<{ data: HeaderType }> = ({ data }) => {
   const navItems = data?.navItems || []
 
   return (
-    // Removed the outer border-b wrapper as it is handled by the parent HeaderClient
-    <nav className="flex gap-1 items-center">
-      {navItems.map(({ link }, i) => {
-        return (
-          <CMSLink
-            key={i}
-            {...link}
-            appearance="link"
-            // Added 'no-underline' to explicitly disable hover underlines
-            className="px-4 py-2 rounded-xl text-sm text-foreground/60 hover:text-foreground hover:bg-foreground/10 no-underline transition-all"
-          />
-        )
-      })}
+    <nav className="flex flex-col md:flex-row gap-1 md:items-center">
+      {navItems.map(({ link }, i) => (
+        <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>
   )
 }

src/blocks/StatsStrip/Component.tsx

@@ -1,5 +1,4 @@
 import React from 'react'
-import { Container } from '@/components/ui/Container' // Adjust path as needed
 
 type Stat = {
   value: string
@@ -14,20 +13,18 @@ export function StatsStripBlock({ stats }: StatsStripProps) {
   if (!Array.isArray(stats) || stats.length === 0) return null
 
   return (
-    <div className="border-b border-foreground/8">
-      <Container className="px-0">
-        <div className="grid" style={{ gridTemplateColumns: `repeat(${stats.length}, 1fr)` }}>
-          {stats.map((stat, i) => (
-            <div
-              key={i}
-              className={`px-6 py-5 ${i < stats.length - 1 ? 'border-r border-foreground/8' : ''}`}
-            >
-              <p className="text-2xl font-medium text-foreground">{stat.value}</p>
-              <p className="text-xs text-foreground/30 mt-1">{stat.label}</p>
-            </div>
-          ))}
+    <div className="grid grid-cols-2 md:grid-cols-4 border-b border-t border-foreground/8">
+      {stats.map((stat, i) => (
+        <div
+          key={i}
+          className={`px-6 py-5 ${i % 2 === 0 ? 'border-r border-foreground/8' : ''} ${
+            i < 2 ? 'border-b md:border-b-0 border-foreground/8' : ''
+          } ${i < stats.length - 1 ? 'md:border-r md:border-foreground/8' : ''}`}
+        >
+          <p className="text-2xl font-medium text-foreground">{stat.value}</p>
+          <p className="text-xs text-foreground/30 mt-1">{stat.label}</p>
         </div>
-      </Container>
+      ))}
     </div>
   )
 }