arbitrage-engine/frontend/components/Sidebar.tsx

"use client";

import { useState } from "react";
import Link from "next/link";
import { usePathname } from "next/navigation";
import {
  LayoutDashboard, Info,
  Menu, X, Zap, LogIn, UserPlus,
  ChevronLeft, ChevronRight
} from "lucide-react";

const navItems = [
  { href: "/", label: "仪表盘", icon: LayoutDashboard },
  { href: "/about", label: "说明", icon: Info },
];

export default function Sidebar() {
  const pathname = usePathname();
  const [collapsed, setCollapsed] = useState(false);
  const [mobileOpen, setMobileOpen] = useState(false);

  const SidebarContent = ({ mobile = false }: { mobile?: boolean }) => (
    <div className={`flex flex-col h-full ${mobile ? "w-64" : collapsed ? "w-16" : "w-60"} transition-all duration-200`}>
      {/* Logo */}
      <div className={`flex items-center gap-2 px-4 py-5 border-b border-slate-100 ${collapsed && !mobile ? "justify-center" : ""}`}>
        <Zap className="w-6 h-6 text-blue-600 shrink-0" />
        {(!collapsed || mobile) && (
          <span className="font-bold text-slate-800 text-base leading-tight">Arbitrage<br/>Engine</span>
        )}
      </div>

      {/* Nav */}
      <nav className="flex-1 py-4 space-y-1 px-2">
        {navItems.map(({ href, label, icon: Icon }) => {
          const active = pathname === href;
          return (
            <Link key={href} href={href}
              onClick={() => setMobileOpen(false)}
              className={`flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm transition-colors
                ${active ? "bg-blue-50 text-blue-700 font-medium" : "text-slate-600 hover:bg-slate-100 hover:text-slate-900"}
                ${collapsed && !mobile ? "justify-center" : ""}`}>
              <Icon className={`shrink-0 ${active ? "text-blue-600" : "text-slate-400"}`} size={18} />
              {(!collapsed || mobile) && <span>{label}</span>}
            </Link>
          );
        })}
        {/* 手机端：登录注册放在菜单里 */}
        {mobile && (
          <div className="pt-4 border-t border-slate-100 mt-4 space-y-1">
            <Link href="/login" onClick={() => setMobileOpen(false)}
              className="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm text-slate-600 hover:bg-slate-100 transition-colors">
              <LogIn className="shrink-0 text-slate-400" size={18} /><span>登录</span>
            </Link>
            <Link href="/register" onClick={() => setMobileOpen(false)}
              className="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm text-white bg-blue-600 hover:bg-blue-700 transition-colors">
              <UserPlus className="shrink-0" size={18} /><span>注册</span>
            </Link>
          </div>
        )}
      </nav>

      {/* Collapse toggle (desktop only) */}
      {!mobile && (
        <button onClick={() => setCollapsed(!collapsed)}
          className="flex items-center justify-center p-3 border-t border-slate-100 text-slate-400 hover:text-slate-600 hover:bg-slate-50 transition-colors">
          {collapsed ? <ChevronRight size={16} /> : <ChevronLeft size={16} />}
        </button>
      )}
    </div>
  );

  return (
    <>
      {/* Desktop sidebar */}
      <aside className={`hidden md:flex flex-col bg-white border-r border-slate-200 min-h-screen sticky top-0 shrink-0 transition-all duration-200 ${collapsed ? "w-16" : "w-60"}`}>
        <SidebarContent />
      </aside>

      {/* Mobile top bar */}
      <div className="md:hidden fixed top-0 left-0 right-0 z-40 bg-white border-b border-slate-200 flex items-center justify-between px-4 py-3">
        <div className="flex items-center gap-2">
          <Zap className="w-5 h-5 text-blue-600" />
          <span className="font-bold text-slate-800 text-sm">Arbitrage Engine</span>
        </div>
        <div className="flex items-center gap-2">
          <Link href="/login" className="text-xs text-slate-600 hover:text-blue-600 px-2 py-1 rounded border border-slate-200">登录</Link>
          <Link href="/register" className="text-xs text-white bg-blue-600 hover:bg-blue-700 px-2 py-1 rounded">注册</Link>
          <button onClick={() => setMobileOpen(!mobileOpen)} className="text-slate-600 p-1 ml-1">
            {mobileOpen ? <X size={20} /> : <Menu size={20} />}
          </button>
        </div>
      </div>

      {/* Mobile drawer */}
      {mobileOpen && (
        <div className="md:hidden fixed inset-0 z-30" onClick={() => setMobileOpen(false)}>
          <div className="absolute inset-0 bg-black/30" />
          <aside className="absolute top-0 left-0 bottom-0 bg-white border-r border-slate-200 z-40 flex flex-col"
            onClick={e => e.stopPropagation()}>
            <div className="flex items-center justify-between px-4 py-3 border-b border-slate-100">
              <div className="flex items-center gap-2">
                <Zap className="w-5 h-5 text-blue-600" />
                <span className="font-bold text-slate-800 text-sm">Arbitrage Engine</span>
              </div>
              <button onClick={() => setMobileOpen(false)} className="text-slate-400 p-1"><X size={18} /></button>
            </div>
            <SidebarContent mobile />
          </aside>
        </div>
      )}
    </>
  );
}