调整 Navbar 优化移动菜单

This commit is contained in:
feie9454 2025-12-11 15:37:31 +08:00
parent 0e689b5f8d
commit ebe385a624
5 changed files with 65 additions and 11 deletions

2
.gitignore vendored
View File

@ -41,3 +41,5 @@ yarn-error.log*
next-env.d.ts next-env.d.ts
/app/generated/prisma /app/generated/prisma
logs

View File

@ -36,3 +36,6 @@ html {
color: white; color: white;
} }
*{
box-sizing: border-box;
}

View File

@ -5,7 +5,7 @@ import Contact from '@/components/Contact';
export default function Home() { export default function Home() {
return ( return (
<main> <main className='overflow-hidden'>
<Hero /> <Hero />
<About /> <About />
<Services /> <Services />

View File

@ -22,20 +22,30 @@ const Navbar: React.FC = () => {
return () => window.removeEventListener('scroll', handleScroll); return () => window.removeEventListener('scroll', handleScroll);
}, []); }, []);
useEffect(() => {
const handleResize = () => {
if (window.innerWidth >= 768) {
setIsMobileMenuOpen(false);
}
};
window.addEventListener('resize', handleResize);
return () => window.removeEventListener('resize', handleResize);
}, []);
return ( return (
<nav <nav
className={`fixed top-0 left-0 w-full z-50 transition-all duration-300 ${ className={`fixed top-0 left-0 w-full z-50 transition-all duration-300 ${
isScrolled isScrolled || isMobileMenuOpen
? 'bg-feie-cream/90 backdrop-blur-md shadow-sm py-4' ? 'bg-feie-cream/95 backdrop-blur-md shadow-sm py-4'
: 'bg-transparent py-6' : 'bg-transparent py-6'
}`} }`}
> >
<div className="container mx-auto px-6 flex justify-between items-center"> <div className="container mx-auto px-6 flex justify-between items-center">
<a href="#" className="flex items-center gap-2 group"> <a href="#" className="flex items-center gap-2 group">
<div className={`w-8 h-8 rounded-sm border-2 flex items-center justify-center transition-colors ${isScrolled ? 'border-feie-dark text-feie-dark' : 'border-feie-white text-feie-white'}`}> <div className={`w-8 h-8 rounded-sm border-2 flex items-center justify-center transition-colors ${isScrolled || isMobileMenuOpen ? 'border-feie-dark text-feie-dark' : 'border-feie-white text-feie-white'}`}>
<span className="font-serif font-bold text-lg">F</span> <span className="font-serif font-bold text-lg">F</span>
</div> </div>
<span className={`font-serif text-xl font-bold tracking-wide transition-colors ${isScrolled ? 'text-feie-dark' : 'text-feie-white'}`}> <span className={`font-serif text-xl font-bold tracking-wide transition-colors ${isScrolled || isMobileMenuOpen ? 'text-feie-dark' : 'text-feie-white'}`}>
FEIE TECH FEIE TECH
</span> </span>
</a> </a>
@ -71,28 +81,32 @@ const Navbar: React.FC = () => {
onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)} onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
> >
{isMobileMenuOpen ? ( {isMobileMenuOpen ? (
<X className={isScrolled ? 'text-feie-dark' : 'text-feie-white'} /> <X className={isScrolled || isMobileMenuOpen ? 'text-feie-dark' : 'text-feie-white'} />
) : ( ) : (
<Menu className={isScrolled ? 'text-feie-dark' : 'text-feie-white'} /> <Menu className={isScrolled || isMobileMenuOpen ? 'text-feie-dark' : 'text-feie-white'} />
)} )}
</button> </button>
</div> </div>
{/* Mobile Menu */} {/* Mobile Menu */}
{isMobileMenuOpen && ( <div
<div className="md:hidden absolute top-full left-0 w-full bg-feie-cream border-t border-gray-200 py-4 shadow-lg flex flex-col items-center space-y-4"> className={`md:hidden absolute top-full left-0 w-full bg-feie-cream/95 backdrop-blur-md border-t border-gray-200 shadow-lg flex flex-col items-center transition-all duration-300 ease-in-out overflow-hidden ${
isMobileMenuOpen ? 'max-h-96 opacity-100 py-6' : 'max-h-0 opacity-0 py-0'
}`}
>
<div className="flex flex-col items-center space-y-6 w-full">
{navItems.map((item) => ( {navItems.map((item) => (
<a <a
key={item.label} key={item.label}
href={item.href} href={item.href}
className="font-serif text-feie-dark hover:text-feie-gold" className="font-serif text-lg text-feie-dark hover:text-feie-gold transition-colors"
onClick={() => setIsMobileMenuOpen(false)} onClick={() => setIsMobileMenuOpen(false)}
> >
{item.label} {item.label}
</a> </a>
))} ))}
</div> </div>
)} </div>
</nav> </nav>
); );
}; };

35
pm2.config.cjs Normal file
View File

@ -0,0 +1,35 @@
const path = require('path')
const dotenv = require('dotenv')
// 加载 .env 文件
const envConfig = dotenv.config({ path: path.resolve(__dirname, '.env') })
if (envConfig.error) {
console.error('Error loading .env file:', envConfig.error)
}
module.exports = {
apps: [
{
name: 'nanjing-feie-tech',
script: 'bun',
args: 'run start',
cwd: __dirname,
env: {
...process.env,
NODE_ENV: 'production',
},
instances: 1,
exec_mode: 'fork',
watch: false,
max_memory_restart: '1G',
error_file: './logs/err.log',
out_file: './logs/out.log',
log_file: './logs/combined.log',
time: true,
autorestart: true,
max_restarts: 10,
min_uptime: '10s'
}
]
}