zhaoguiyang.site/src/components/GlassHeader.tsx

import { personalInfo } from "@/lib/data/index";
import LanguageSwitcher from "./LanguageSwitcher";
import ThemeToggle from "./ui/theme-toggle";
import Container from "./ui/Container";
import { useTranslations, getLocalizedPath } from "@/i18n/utils";
import type { Lang } from "@/types/i18n";
import { useState, useEffect } from "react";
import { Menu, X } from "lucide-react";
import { defaultLang } from "@/i18n/ui";
import { type GlassHeaderProps } from "@/types";
import { motion } from "framer-motion";

export default function GlassHeader({ lang: propLang }: GlassHeaderProps) {
  const [lang, setLang] = useState<Lang>(propLang || defaultLang);
  
  useEffect(() => {
    const htmlLang = document.documentElement.lang as Lang;
    if (htmlLang && (!propLang || htmlLang !== lang)) {
      setLang(htmlLang);
    }
  }, [propLang, lang]);

  const t = useTranslations(lang);
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const [isScrolled, setIsScrolled] = useState(false);

  useEffect(() => {
    const handleScroll = () => {
      setIsScrolled(window.scrollY > 0);
    };

    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  const toggleMenu = () => setIsMenuOpen(!isMenuOpen);

  return (
    <motion.header 
      initial={{ y: -100, opacity: 0 }}
      animate={{ y: 0, opacity: 1 }}
      transition={{ duration: 0.5, ease: [0.22, 1, 0.36, 1] }}
      className={`fixed top-0 z-50 w-full transition-all duration-300 ${
        isScrolled 
          ? 'backdrop-blur-md backdrop-filter bg-white/80 dark:bg-black/80 border-b border-border/30 shadow-lg shadow-black/5 dark:shadow-black/20' 
          : 'bg-transparent'
      }`}
    >
      <Container className="p-4 flex justify-between items-center">
        <motion.a
          whileHover={{ scale: 1.05 }}
          whileTap={{ scale: 0.95 }}
          className="flex items-center text-lg font-medium transition-colors duration-150 hover:text-foreground/80"
          href={getLocalizedPath('/', lang)}
        >
          <img 
            src="/modern-code-icon.svg" 
            alt="Code Icon" 
            className="w-6 h-6 mr-2" 
          /> 
          <span className="gradient-text font-bold">{personalInfo.name}</span>
        </motion.a>

        {/* Desktop Navigation */}
        <nav className="hidden md:flex items-center space-x-6 text-sm font-medium">
          {[ 
            { key: 'nav.home', icon: '🏠 ', href: getLocalizedPath('/', lang) },
            { key: 'nav.about', icon: '👨‍💻 ', href: getLocalizedPath('/about', lang) },
            { key: 'nav.services', icon: '🛠️ ', href: getLocalizedPath('/services', lang) },
            // { key: 'nav.projects', icon: '🚀 ', href: getLocalizedPath('/projects', lang) },
            { key: 'nav.blog', icon: '📝 ', href: getLocalizedPath('/blog', lang) },
          ].map((item, index) => (
            <motion.a
              key={item.key}
              href={item.href}
              className="transition-colors duration-150 hover:text-foreground/80 text-foreground/60 px-3 py-2 rounded-md hover:bg-foreground/5"
              initial={{ opacity: 0, y: -20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ 
                duration: 0.3, 
                delay: 0.1 + index * 0.1,
                ease: "easeOut"
              }}
              whileHover={{ y: -2 }}
            >
              {item.icon}
              {t(item.key as any)}
            </motion.a>
          ))}
        </nav>

        <div className="flex items-center space-x-3">
          {/* Language Switcher added here */}
          <motion.div
            initial={{ opacity: 0, scale: 0.8 }}
            animate={{ opacity: 1, scale: 1 }}
            transition={{ duration: 0.3, delay: 0.4 }}
          >
            <LanguageSwitcher lang={lang} />
          </motion.div>
          
          <motion.div
            initial={{ opacity: 0, scale: 0.8 }}
            animate={{ opacity: 1, scale: 1 }}
            transition={{ duration: 0.3, delay: 0.5 }}
          >
            <ThemeToggle />
          </motion.div>

          {/* Mobile Menu Button */}          
          <motion.button
            className="md:hidden p-2 text-foreground transition-all duration-150 hover:bg-foreground/10 active:bg-foreground/20 rounded-md"
            onClick={toggleMenu}
            aria-label="Toggle menu"
            whileTap={{ scale: 0.9 }}
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            transition={{ duration: 0.3, delay: 0.6 }}
          >
            {isMenuOpen ? <X size={24} /> : <Menu size={24} />}
          </motion.button>
        </div>
      </Container>

      {/* Mobile Navigation */}
      <div className={`md:hidden overflow-hidden transition-all duration-300 ease-out ${
        isMenuOpen ? 'max-h-60 opacity-100' : 'max-h-0 opacity-0'
      }`}>
        <div className={`py-4 px-4 border-t border-border/10 glass-effect ${
          isScrolled 
            ? 'bg-white/80 dark:bg-black/80 shadow-sm' 
            : 'bg-white/85 dark:bg-black/85'
        }`}>
          <nav className="flex flex-col space-y-3 text-sm font-medium">
            {[ 
              { key: 'nav.home', icon: '🏠 ', href: getLocalizedPath('/', lang) },
              { key: 'nav.about', icon: '👨‍💻 ', href: getLocalizedPath('/about', lang) },
              { key: 'nav.services', icon: '🛠️ ', href: getLocalizedPath('/services', lang) },
              { key: 'nav.projects', icon: '🚀 ', href: getLocalizedPath('/projects', lang) },
              { key: 'nav.blog', icon: '📝 ', href: getLocalizedPath('/blog', lang) },
            ].map((item, index) => (
              <motion.a
                key={item.key}
                href={item.href}
                className="transition-colors duration-150 hover:text-foreground/80 text-foreground/60 py-2 px-3 block rounded-md hover:bg-foreground/5"
                onClick={toggleMenu}
                initial={{ opacity: 0, x: -20 }}
                animate={{ opacity: 1, x: 0 }}
                transition={{ 
                  duration: 0.2, 
                  delay: index * 0.05,
                  ease: "easeOut"
                }}
              >
                {item.icon}
                {t(item.key as any)}
              </motion.a>
            ))}
          </nav>
        </div>
      </div>
    </motion.header>
  );
}