fill most content + improve ux

src/components/header/MobileNavigation.tsx

@@ -0,0 +1,85 @@
+import { useTranslations } from '@/i18n/utils'
+import { cn } from '@/libs/cn'
+import React, { useState, useEffect, type ButtonHTMLAttributes } from 'react'
+
+const t = useTranslations()
+
+type AnimatedBurgerButtonProps = ButtonHTMLAttributes<unknown> & {
+  isOpen: boolean
+}
+
+const AnimatedBurgerButton: React.FC<AnimatedBurgerButtonProps> = ({ isOpen, ...buttonProps }) => (
+  <button
+    {...buttonProps}
+    className="fixed right-4 top-4 z-[60] flex h-8 w-8 cursor-pointer flex-col justify-around border-none bg-transparent p-0 focus:outline-none"
+    aria-label={isOpen ? 'Close menu' : 'Open menu'}
+    aria-expanded={isOpen}
+  >
+    <div
+      className={cn(
+        'h-1 w-8 rounded-md bg-white transition-all duration-300 ease-in-out',
+        isOpen ? 'translate-y-[11px] rotate-45' : ''
+      )}
+    />
+    <div
+      className={cn(
+        'h-1 w-8 rounded-md bg-white transition-all duration-300 ease-in-out',
+        isOpen ? 'opacity-0' : ''
+      )}
+    />
+    <div
+      className={cn(
+        'h-1 w-8 rounded-md bg-white transition-all duration-300 ease-in-out',
+        isOpen ? '-translate-y-[11px] -rotate-45' : ''
+      )}
+    />
+  </button>
+)
+
+type MobileNavigationProps = {
+  navItems: readonly {
+    key: string
+    href: string
+  }[]
+}
+
+const MobileNavigation: React.FC<MobileNavigationProps> = ({ navItems }) => {
+  const [isOpen, setIsOpen] = useState(false)
+
+  const toggleMenu = () => {
+    setIsOpen(!isOpen)
+  }
+
+  useEffect(() => {
+    if (isOpen) {
+      document.body.style.overflow = 'hidden'
+    } else {
+      document.body.style.overflow = 'unset'
+    }
+    return () => {
+      document.body.style.overflow = 'unset'
+    }
+  }, [isOpen])
+
+  return (
+    <div className="md:hidden">
+      <AnimatedBurgerButton isOpen={isOpen} onClick={toggleMenu} />
+      <div
+        className={cn(
+          'fixed left-0 top-0 z-50 w-full transform bg-bg-main p-6 pt-16 transition-transform duration-500 ease-in-out',
+          isOpen ? 'translate-y-0' : '-translate-y-full'
+        )}
+      >
+        <nav className="flex flex-col items-center space-y-8">
+          {navItems.map((item) => (
+            <a key={item.key} href={item.href} className="text-3xl" onClick={toggleMenu}>
+              {t(item.key as any)}
+            </a>
+          ))}
+        </nav>
+      </div>
+    </div>
+  )
+}
+
+export default MobileNavigation