From 56aac2f9f2604afd76c5dcf980c8d94f59dbb609 Mon Sep 17 00:00:00 2001
From: zguiyang <zhaoguiyang18@outlook.com>
Date: Sat, 14 Mar 2026 12:22:43 +0800
Subject: [PATCH] refactor(header): replace emoji icons with Lucide React
 components and enhance navigation structure

- Introduced `navItems` array with icons and links for streamlined navigation rendering.
- Added `isActive` function to handle active state for improved user feedback.
- Refined desktop and mobile navigation with updated styles and scalable icon usage.
- Removed hardcoded emoji-based navigation for consistency with other components.
---
 src/components/GlassHeader.tsx | 130 ++++++++++++++++-----------------
 1 file changed, 61 insertions(+), 69 deletions(-)

diff --git a/src/components/GlassHeader.tsx b/src/components/GlassHeader.tsx
index 549b2d9..dc60bcb 100644
--- a/src/components/GlassHeader.tsx
+++ b/src/components/GlassHeader.tsx
@@ -5,15 +5,18 @@ import Container from "./ui/Container.tsx";
 import { useTranslations, getLocalizedPath } from "@/i18n/utils";
 import type { Lang } from "@/types/i18n";
 import { useState, useEffect } from "react";
-import { Menu, X } from "lucide-react";
+import { Menu, X, Home, Rocket, PenTool, Zap, Briefcase, User } from "lucide-react";
 import { defaultLang } from "@/i18n/ui";
 import { type GlassHeaderProps } from "@/types";
 import { motion } from "framer-motion";
+import { cn } from "@/lib/utils";
 
 export default function GlassHeader({ lang: propLang }: GlassHeaderProps) {
   const [lang, setLang] = useState<Lang>(propLang || defaultLang);
+  const [currentPath, setCurrentPath] = useState("");
   
   useEffect(() => {
+    setCurrentPath(window.location.pathname);
     const htmlLang = document.documentElement.lang as Lang;
     if (htmlLang && (!propLang || htmlLang !== lang)) {
       setLang(htmlLang);
@@ -35,11 +38,24 @@ export default function GlassHeader({ lang: propLang }: GlassHeaderProps) {
 
   const toggleMenu = () => setIsMenuOpen(!isMenuOpen);
 
+  const navItems = [
+    { key: 'nav.home', icon: Home, href: getLocalizedPath('/', lang) },
+    { key: 'nav.projects', icon: Rocket, href: getLocalizedPath('/projects', lang) },
+    { key: 'nav.blog', icon: PenTool, href: getLocalizedPath('/blog', lang) },
+    { key: 'nav.now', icon: Zap, href: getLocalizedPath('/now', lang) },
+    { key: 'nav.hire', icon: Briefcase, href: getLocalizedPath('/hire', lang) },
+    { key: 'nav.about', icon: User, href: getLocalizedPath('/about', lang) },
+  ];
+
+  const isActive = (path: string) => {
+    if (path === '/' || path === '/zh' || path === '/zh/') {
+      return currentPath === path;
+    }
+    return currentPath.startsWith(path);
+  };
+
   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-xl backdrop-saturate-150 bg-white/70 dark:bg-black/70 border-b border-border/50 shadow-lg shadow-black/5 dark:shadow-primary/5'
@@ -63,49 +79,34 @@ export default function GlassHeader({ lang: propLang }: GlassHeaderProps) {
 
         {/* 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.projects', icon: '🚀 ', href: getLocalizedPath('/projects', lang) },
-            { key: 'nav.blog', icon: '📝 ', href: getLocalizedPath('/blog', lang) },
-            { key: 'nav.now', icon: '⚡ ', href: getLocalizedPath('/now', lang) },
-            { key: 'nav.hire', icon: '💼 ', href: getLocalizedPath('/hire', lang) },
-            { key: 'nav.about', icon: '👨‍💻 ', href: getLocalizedPath('/about', lang) },
-
-          ].map((item, index) => (
-            <motion.a
-              key={item.key}
-              href={item.href}
-              className="transition-colors duration-150 hover:text-primary text-foreground/70 px-3 py-2 rounded-md hover:bg-primary/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>
-          ))}
+          {navItems.map((item) => {
+            const active = isActive(item.href);
+            return (
+              <motion.a
+                key={item.key}
+                href={item.href}
+                className={cn(
+                  "flex items-center gap-2 transition-colors duration-150 px-3 py-2 rounded-md hover:bg-primary/5",
+                  active 
+                    ? "text-primary bg-primary/5 font-semibold" 
+                    : "text-foreground/70 hover:text-primary"
+                )}
+                whileHover={{ y: -2 }}
+              >
+                <item.icon size={16} />
+                {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 }}
-          >
+          <motion.div>
             <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 }}
-          >
+          <motion.div>
             <ThemeToggle />
           </motion.div>
 
@@ -115,9 +116,6 @@ export default function GlassHeader({ lang: propLang }: GlassHeaderProps) {
             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>
@@ -126,7 +124,7 @@ export default function GlassHeader({ lang: propLang }: GlassHeaderProps) {
 
       {/* 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'
+        isMenuOpen ? 'max-h-80 opacity-100' : 'max-h-0 opacity-0'
       }`}>
         <div className={`py-4 px-4 border-t border-border/10 glass-effect ${
           isScrolled 
@@ -134,31 +132,25 @@ export default function GlassHeader({ lang: propLang }: GlassHeaderProps) {
             : '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.projects', icon: '🚀 ', href: getLocalizedPath('/projects', lang) },
-              { key: 'nav.blog', icon: '📝 ', href: getLocalizedPath('/blog', lang) },
-              { key: 'nav.now', icon: '⚡ ', href: getLocalizedPath('/now', lang) },
-              { key: 'nav.hire', icon: '💼 ', href: getLocalizedPath('/hire', lang) },
-              { key: 'nav.about', icon: '👨‍💻 ', href: getLocalizedPath('/about', 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>
-            ))}
+            {navItems.map((item) => {
+              const active = isActive(item.href);
+              return (
+                <motion.a
+                  key={item.key}
+                  href={item.href}
+                  className={cn(
+                    "flex items-center gap-2 transition-colors duration-150 py-2 px-3 block rounded-md",
+                    active
+                      ? "text-primary bg-primary/5 font-semibold"
+                      : "text-foreground/60 hover:text-foreground/80 hover:bg-foreground/5"
+                  )}
+                  onClick={toggleMenu}
+                >
+                  <item.icon size={18} />
+                  {t(item.key as any)}
+                </motion.a>
+              );
+            })}
           </nav>
         </div>
       </div>