mypage/components/blog/navbar.tsx

'use client'

import { useEffect, useState } from 'react'
import { useTranslations } from 'next-intl'
import { Link } from '@/i18n/navigation'
import { ThemeToggle } from '@/components/theme-toggle'
import LanguageSwitcher from '@/components/layout/LanguageSwitcher'

export function Navbar() {
  const t = useTranslations('Navigation')
  const [isVisible, setIsVisible] = useState(true)
  const [lastScrollY, setLastScrollY] = useState(0)

  useEffect(() => {
    const handleScroll = () => {
      const currentScrollY = window.scrollY

      if (currentScrollY < 10) {
        setIsVisible(true)
      } else if (currentScrollY > lastScrollY) {
        setIsVisible(false)
      } else {
        setIsVisible(true)
      }

      setLastScrollY(currentScrollY)
    }

    window.addEventListener('scroll', handleScroll, { passive: true })
    return () => window.removeEventListener('scroll', handleScroll)
  }, [lastScrollY])

  return (
    <nav
      className={`border-b-4 border-slate-700 bg-slate-900 dark:bg-zinc-950 sticky top-0 z-50 ${isVisible ? 'navbar-visible' : 'navbar-hidden'}`}
    >
      <div className="max-w-7xl mx-auto px-6 py-4">
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-8">
            <Link
              href="/"
              className="font-mono text-sm uppercase tracking-wider transition-colors cursor-pointer"
              style={{ color: 'var(--neon-cyan)' }}
            >
              &lt; {t('home')}
            </Link>
            <span className="font-mono text-sm text-zinc-100 dark:text-zinc-300 uppercase tracking-wider">
              // <span style={{ color: 'var(--neon-pink)' }}>{t('blog')}</span> ARCHIVE
            </span>
          </div>
          <div className="flex items-center gap-6">
            <Link
              href="/about"
              className="font-mono text-sm text-zinc-400 dark:text-zinc-500 uppercase tracking-wider hover:text-cyan-400 dark:hover:text-cyan-300 transition-colors cursor-pointer"
            >
              [{t('about')}]
            </Link>
            <Link
              href="/blog"
              className="font-mono text-sm text-zinc-400 dark:text-zinc-500 uppercase tracking-wider hover:text-cyan-400 dark:hover:text-cyan-300 transition-colors cursor-pointer"
            >
              [{t('blog')}]
            </Link>
            <ThemeToggle />
            <LanguageSwitcher />
          </div>
        </div>
      </div>
    </nav>
  )
}