调整 Navbar 优化移动菜单
This commit is contained in:
parent
0e689b5f8d
commit
ebe385a624
2
.gitignore
vendored
2
.gitignore
vendored
@ -41,3 +41,5 @@ yarn-error.log*
|
|||||||
next-env.d.ts
|
next-env.d.ts
|
||||||
|
|
||||||
/app/generated/prisma
|
/app/generated/prisma
|
||||||
|
|
||||||
|
logs
|
||||||
@ -36,3 +36,6 @@ html {
|
|||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
*{
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
@ -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 />
|
||||||
|
|||||||
@ -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
35
pm2.config.cjs
Normal 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'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user