lulu/arbitrage-engine
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: responsive navbar with hamburger menu for mobile

Browse Source
This commit is contained in:
root 2026-02-27 02:20:26 +00:00
parent 89a390e6bd
commit 437cc35472
2 changed files with 77 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
frontend/app/layout.tsx
View File

@ -1,7 +1,7 @@
import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css";
import Link from "next/link";
import Navbar from "@/components/Navbar";
const geistSans = Geist({
variable: "--font-geist-sans",
@ -28,46 +28,8 @@ export default function RootLayout({
<body
className={`${geistSans.variable} ${geistMono.variable} antialiased min-h-screen bg-slate-900 text-slate-100`}
>
{/* Top nav */}
<nav className="border-b border-slate-700 bg-slate-900/80 backdrop-blur sticky top-0 z-50">
<div className="max-w-6xl mx-auto px-4 h-14 flex items-center gap-8">
<span className="font-bold text-cyan-400 tracking-tight text-lg">
⚡ Arbitrage Engine
</span>
<div className="flex gap-6 text-sm">
<Link
href="/"
className="text-slate-300 hover:text-cyan-400 transition-colors"
>
仪表盘
</Link>
<Link
href="/history"
className="text-slate-300 hover:text-cyan-400 transition-colors"
>
历史
</Link>
<Link
href="/signals"
className="text-slate-300 hover:text-cyan-400 transition-colors"
>
信号
</Link>
<Link
href="/about"
className="text-slate-300 hover:text-cyan-400 transition-colors"
>
说明
</Link>
</div>
<div className="ml-auto flex gap-3 text-sm">
<Link href="/login" className="text-slate-400 hover:text-slate-200 transition-colors">登录</Link>
<Link href="/register" className="bg-cyan-600 hover:bg-cyan-500 text-white px-3 py-1 rounded-lg transition-colors">注册</Link>
</div>
</div>
</nav>
<main className="max-w-6xl mx-auto px-4 py-8">{children}</main>
<Navbar />
<main className="max-w-6xl mx-auto px-4 py-6">{children}</main>
</body>
</html>
);

74
frontend/components/Navbar.tsx Normal file
View File

@ -0,0 +1,74 @@
"use client";
import Link from "next/link";
import { useState } from "react";
const navLinks = [
{ href: "/", label: "仪表盘" },
{ href: "/history", label: "历史" },
{ href: "/signals", label: "信号" },
{ href: "/about", label: "说明" },
];
export default function Navbar() {
const [open, setOpen] = useState(false);
return (
<nav className="border-b border-slate-700 bg-slate-900/80 backdrop-blur sticky top-0 z-50">
<div className="max-w-6xl mx-auto px-4 h-14 flex items-center">
<Link href="/" className="font-bold text-cyan-400 tracking-tight text-lg shrink-0">
⚡ Arbitrage Engine
</Link>
{/* Desktop nav */}
<div className="hidden md:flex items-center gap-6 text-sm ml-8">
{navLinks.map(l => (
<Link key={l.href} href={l.href} className="text-slate-300 hover:text-cyan-400 transition-colors">
{l.label}
</Link>
))}
</div>
<div className="hidden md:flex items-center gap-3 text-sm ml-auto">
<Link href="/login" className="text-slate-400 hover:text-slate-200 transition-colors">登录</Link>
<Link href="/register" className="bg-cyan-600 hover:bg-cyan-500 text-white px-3 py-1 rounded-lg transition-colors">注册</Link>
</div>
{/* Mobile: right side buttons + hamburger */}
<div className="md:hidden ml-auto flex items-center gap-2">
<Link href="/login" className="text-slate-400 hover:text-slate-200 text-sm transition-colors">登录</Link>
<Link href="/register" className="bg-cyan-600 hover:bg-cyan-500 text-white px-2 py-1 rounded text-sm transition-colors">注册</Link>
<button
onClick={() => setOpen(!open)}
className="ml-1 p-2 text-slate-400 hover:text-slate-200"
aria-label="菜单"
>
{open ? (
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
</svg>
) : (
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
</svg>
)}
</button>
</div>
</div>
{/* Mobile dropdown */}
{open && (
<div className="md:hidden border-t border-slate-700 bg-slate-900 px-4 py-3 space-y-1">
{navLinks.map(l => (
<Link
key={l.href}
href={l.href}
onClick={() => setOpen(false)}
className="block py-2 text-slate-300 hover:text-cyan-400 transition-colors text-sm"
>
{l.label}
</Link>
))}
</div>
)}
</nav>
);
}