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.
This commit is contained in:
zguiyang
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user