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
+40 -19
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,35 +147,50 @@ export function Header() {
</div> </div>
</header> </header>
<AnimatePresence>
{isOpen && ( {isOpen && (
<div className="fixed inset-0 z-40 md:hidden"> <motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
className="fixed inset-0 z-40 md:hidden"
>
<div <div
className="absolute inset-0 bg-black/10 backdrop-blur-sm" className="absolute inset-0 bg-black/60 backdrop-blur-sm"
onClick={() => setIsOpen(false)} onClick={() => setIsOpen(false)}
/> />
<div className="absolute top-16 left-0 right-0 bg-white dark:bg-[#171717] border-b border-[#E5E5E5] dark:border-[#333333] animate-fade-in"> <motion.div
initial={{ y: -20, opacity: 0 }}
animate={{ y: 0, opacity: 1 }}
exit={{ y: -20, opacity: 0 }}
transition={{ type: "spring", stiffness: 300, damping: 30 }}
className="absolute top-16 left-0 right-0 bg-[var(--color-bg-secondary)] border-b border-gray-800 shadow-xl"
>
<nav className="container-wide py-4"> <nav className="container-wide py-4">
{NAVIGATION.map((item) => ( {NAVIGATION.map((item, index) => (
<a <motion.a
key={item.id} key={item.id}
href={item.href} href={item.href}
onClick={(e) => handleNavClick(e, item.href)} onClick={(e) => handleNavClick(e, item.href)}
initial={{ x: -20, opacity: 0 }}
animate={{ x: 0, opacity: 1 }}
transition={{ delay: index * 0.05 }}
className={` className={`
block px-4 py-3 text-base font-medium block px-4 py-3 text-base font-medium
transition-colors duration-200 transition-all duration-300
border-l-2 border-l-2
${activeSection === item.id.replace('#', '') ${activeSection === item.id.replace('#', '')
? 'text-[#C41E3A] border-[#C41E3A] bg-[#FEF2F4] dark:bg-[#1A0F11]' ? 'text-[var(--color-tech-blue)] border-[var(--color-tech-blue)] bg-[var(--color-tech-blue)]/10'
: 'text-[#525252] dark:text-[#D4D4D4] border-transparent hover:text-[#C41E3A] hover:bg-[#FAFAFA] dark:hover:bg-[#262626]' : 'text-gray-400 border-transparent hover:text-[var(--color-tech-blue)] hover:bg-[var(--color-bg-tertiary)]'
} }
`} `}
> >
{item.label} {item.label}
</a> </motion.a>
))} ))}
<div className="mt-4 px-4 pt-4 border-t border-[#E5E5E5] space-y-3"> <div className="mt-4 px-4 pt-4 border-t border-gray-800 space-y-3">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<span className="text-sm text-[#737373]">主题模式</span> <span className="text-sm text-gray-500">主题模式</span>
<ThemeToggle /> <ThemeToggle />
</div> </div>
<Button <Button
@@ -187,9 +207,10 @@ export function Header() {
</Button> </Button>
</div> </div>
</nav> </nav>
</div> </motion.div>
</div> </motion.div>
)} )}
</AnimatePresence>
</> </>
); );
} }