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 { Menu, X } from 'lucide-react';
import { motion, AnimatePresence } from 'framer-motion';
import { Button } from '@/components/ui/button';
import { ThemeToggle } from '@/components/ui/theme-toggle';
import { COMPANY_INFO, NAVIGATION } from '@/lib/constants';
@@ -63,7 +64,7 @@ export function Header() {
fixed top-0 left-0 right-0 z-50
transition-all duration-300 ease-out
${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'
}
`}
@@ -90,16 +91,20 @@ export function Header() {
onClick={(e) => handleNavClick(e, item.href)}
className={`
relative px-3 py-1.5 text-sm font-medium
transition-colors duration-200
transition-all duration-300
${activeSection === item.id.replace('#', '')
? 'text-[#C41E3A]'
: 'text-[#525252] dark:text-[#D4D4D4] hover:text-[#C41E3A]'
? 'text-[var(--color-tech-blue)]'
: 'text-gray-400 hover:text-[var(--color-tech-blue)]'
}
`}
>
{item.label}
{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>
))}
@@ -133,7 +138,7 @@ export function Header() {
</div>
<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)}
>
{isOpen ? <X className="w-5 h-5" /> : <Menu className="w-5 h-5" />}
@@ -142,54 +147,70 @@ export function Header() {
</div>
</header>
{isOpen && (
<div className="fixed inset-0 z-40 md:hidden">
<div
className="absolute inset-0 bg-black/10 backdrop-blur-sm"
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">
<nav className="container-wide py-4">
{NAVIGATION.map((item) => (
<a
key={item.id}
href={item.href}
onClick={(e) => handleNavClick(e, item.href)}
className={`
block px-4 py-3 text-base font-medium
transition-colors duration-200
border-l-2
${activeSection === item.id.replace('#', '')
? '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]'
}
`}
>
{item.label}
</a>
))}
<div className="mt-4 px-4 pt-4 border-t border-[#E5E5E5] space-y-3">
<div className="flex items-center justify-between">
<span className="text-sm text-[#737373]">主题模式</span>
<ThemeToggle />
<AnimatePresence>
{isOpen && (
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
className="fixed inset-0 z-40 md:hidden"
>
<div
className="absolute inset-0 bg-black/60 backdrop-blur-sm"
onClick={() => setIsOpen(false)}
/>
<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">
{NAVIGATION.map((item, index) => (
<motion.a
key={item.id}
href={item.href}
onClick={(e) => handleNavClick(e, item.href)}
initial={{ x: -20, opacity: 0 }}
animate={{ x: 0, opacity: 1 }}
transition={{ delay: index * 0.05 }}
className={`
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>
<Button
className="w-full"
onClick={() => {
const element = document.getElementById('contact');
if (element) {
element.scrollIntoView({ behavior: 'smooth' });
}
setIsOpen(false);
}}
>
联系我们
</Button>
</div>
</nav>
</div>
</div>
)}
</nav>
</motion.div>
</motion.div>
)}
</AnimatePresence>
</>
);
}