novalon/novalon-website
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: enhance header with dark tech theme and framer-motion animations

Browse Source
This commit is contained in:
张翔
2026-02-21 22:55:24 +08:00
parent cbd45e236b
commit 1b0454998d
1 changed files with 74 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/layout/header.tsx
+74 -53
View File
@@ -2,6 +2,7 @@
import { useState, useEffect, useCallback } from 'react'; import { useState, useEffect, useCallback } from 'react';
import { Menu, X } from 'lucide-react'; import { Menu, X } from 'lucide-react';
import { motion, AnimatePresence } from 'framer-motion';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
import { ThemeToggle } from '@/components/ui/theme-toggle'; import { ThemeToggle } from '@/components/ui/theme-toggle';
import { COMPANY_INFO, NAVIGATION } from '@/lib/constants'; import { COMPANY_INFO, NAVIGATION } from '@/lib/constants';
@@ -63,7 +64,7 @@ export function Header() {
fixed top-0 left-0 right-0 z-50 fixed top-0 left-0 right-0 z-50
transition-all duration-300 ease-out transition-all duration-300 ease-out
${isScrolled ${isScrolled
? 'bg-white/95 dark:bg-[#171717]/95 backdrop-blur-sm border-b border-[#E5E5E5] dark:border-[#333333]' ? 'bg-[var(--color-bg-primary)]/95 backdrop-blur-md border-b border-gray-800 shadow-lg shadow-black/20'
: 'bg-transparent' : 'bg-transparent'
} }
`} `}
@@ -90,16 +91,20 @@ export function Header() {
onClick={(e) => handleNavClick(e, item.href)} onClick={(e) => handleNavClick(e, item.href)}
className={` className={`
relative px-3 py-1.5 text-sm font-medium relative px-3 py-1.5 text-sm font-medium
transition-colors duration-200 transition-all duration-300
${activeSection === item.id.replace('#', '') ${activeSection === item.id.replace('#', '')
? 'text-[#C41E3A]' ? 'text-[var(--color-tech-blue)]'
: 'text-[#525252] dark:text-[#D4D4D4] hover:text-[#C41E3A]' : 'text-gray-400 hover:text-[var(--color-tech-blue)]'
} }
`} `}
> >
{item.label} {item.label}
{activeSection === item.id.replace('#', '') && ( {activeSection === item.id.replace('#', '') && (
<span className="absolute bottom-0 left-1/2 -translate-x-1/2 w-1 h-1 bg-[#C41E3A] rounded-full" /> <motion.span
layoutId="activeNav"
className="absolute bottom-0 left-1/2 -translate-x-1/2 w-6 h-0.5 bg-gradient-to-r from-[var(--color-tech-blue)] to-[var(--color-tech-purple)] rounded-full"
transition={{ type: "spring", stiffness: 380, damping: 30 }}
/>
)} )}
</a> </a>
))} ))}
@@ -133,7 +138,7 @@ export function Header() {
</div> </div>
<button <button
className="md:hidden p-2 -mr-2 text-[#525252] dark:text-[#D4D4D4] hover:text-[#C41E3A] transition-colors" className="md:hidden p-2 -mr-2 text-gray-400 hover:text-[var(--color-tech-blue)] transition-colors"
onClick={() => setIsOpen(!isOpen)} onClick={() => setIsOpen(!isOpen)}
> >
{isOpen ? <X className="w-5 h-5" /> : <Menu className="w-5 h-5" />} {isOpen ? <X className="w-5 h-5" /> : <Menu className="w-5 h-5" />}
@@ -142,54 +147,70 @@ export function Header() {
</div> </div>
</header> </header>
{isOpen && ( <AnimatePresence>
<div className="fixed inset-0 z-40 md:hidden"> {isOpen && (
<div <motion.div
className="absolute inset-0 bg-black/10 backdrop-blur-sm" initial={{ opacity: 0 }}
onClick={() => setIsOpen(false)} animate={{ opacity: 1 }}
/> exit={{ opacity: 0 }}
<div className="absolute top-16 left-0 right-0 bg-white dark:bg-[#171717] border-b border-[#E5E5E5] dark:border-[#333333] animate-fade-in"> className="fixed inset-0 z-40 md:hidden"
<nav className="container-wide py-4"> >
{NAVIGATION.map((item) => ( <div
<a className="absolute inset-0 bg-black/60 backdrop-blur-sm"
key={item.id} onClick={() => setIsOpen(false)}
href={item.href} />
onClick={(e) => handleNavClick(e, item.href)} <motion.div
className={` initial={{ y: -20, opacity: 0 }}
block px-4 py-3 text-base font-medium animate={{ y: 0, opacity: 1 }}
transition-colors duration-200 exit={{ y: -20, opacity: 0 }}
border-l-2 transition={{ type: "spring", stiffness: 300, damping: 30 }}
${activeSection === item.id.replace('#', '') className="absolute top-16 left-0 right-0 bg-[var(--color-bg-secondary)] border-b border-gray-800 shadow-xl"
? 'text-[#C41E3A] border-[#C41E3A] bg-[#FEF2F4] dark:bg-[#1A0F11]' >
: 'text-[#525252] dark:text-[#D4D4D4] border-transparent hover:text-[#C41E3A] hover:bg-[#FAFAFA] dark:hover:bg-[#262626]' <nav className="container-wide py-4">
} {NAVIGATION.map((item, index) => (
`} <motion.a
> key={item.id}
{item.label} href={item.href}
</a> onClick={(e) => handleNavClick(e, item.href)}
))} initial={{ x: -20, opacity: 0 }}
<div className="mt-4 px-4 pt-4 border-t border-[#E5E5E5] space-y-3"> animate={{ x: 0, opacity: 1 }}
<div className="flex items-center justify-between"> transition={{ delay: index * 0.05 }}
<span className="text-sm text-[#737373]">主题模式</span> className={`
<ThemeToggle /> block px-4 py-3 text-base font-medium
transition-all duration-300
border-l-2
${activeSection === item.id.replace('#', '')
? 'text-[var(--color-tech-blue)] border-[var(--color-tech-blue)] bg-[var(--color-tech-blue)]/10'
: 'text-gray-400 border-transparent hover:text-[var(--color-tech-blue)] hover:bg-[var(--color-bg-tertiary)]'
}
`}
>
{item.label}
</motion.a>
))}
<div className="mt-4 px-4 pt-4 border-t border-gray-800 space-y-3">
<div className="flex items-center justify-between">
<span className="text-sm text-gray-500">主题模式</span>
<ThemeToggle />
</div>
<Button
className="w-full"
onClick={() => {
const element = document.getElementById('contact');
if (element) {
element.scrollIntoView({ behavior: 'smooth' });
}
setIsOpen(false);
}}
>
联系我们
</Button>
</div> </div>
<Button </nav>
className="w-full" </motion.div>
onClick={() => { </motion.div>
const element = document.getElementById('contact'); )}
if (element) { </AnimatePresence>
element.scrollIntoView({ behavior: 'smooth' });
}
setIsOpen(false);
}}
>
联系我们
</Button>
</div>
</nav>
</div>
</div>
)}
</> </>
); );
} }