maikrolf
1ddc89479c
Multi-file upload with Quick Upload + Crypto Payment tabs. Dashboard with live IPFS metrics, Explorer, Peers, Pins, History, Settings pages. Docker deploy (standalone output), full test suite (16 Playwright tests). Payment integration via IPFSPortalPayment + MockUSDC contracts on zkSync.
83 lines
2.6 KiB
TypeScript
83 lines
2.6 KiB
TypeScript
'use client';
|
|
|
|
import Link from 'next/link';
|
|
import { usePathname } from 'next/navigation';
|
|
import {
|
|
LayoutDashboard,
|
|
Upload,
|
|
Globe,
|
|
HardDrive,
|
|
Users,
|
|
Activity,
|
|
Settings,
|
|
Fingerprint,
|
|
Shield,
|
|
LogOut,
|
|
Clock,
|
|
} from 'lucide-react';
|
|
|
|
const NAV_ITEMS = [
|
|
{ href: '/dashboard', label: 'Dashboard', icon: LayoutDashboard },
|
|
{ href: '/upload', label: 'Upload', icon: Upload },
|
|
{ href: '/explorer', label: 'Explorer', icon: Globe },
|
|
{ href: '/pins', label: 'Pins', icon: HardDrive },
|
|
{ href: '/history', label: 'History', icon: Clock },
|
|
{ href: '/ipns', label: 'IPNS', icon: Fingerprint },
|
|
{ href: '/peers', label: 'Peers', icon: Activity },
|
|
{ href: '/users', label: 'Users', icon: Users },
|
|
{ href: '/admin/payment', label: 'Payment Admin', icon: Shield },
|
|
{ href: '/settings', label: 'Settings', icon: Settings },
|
|
];
|
|
|
|
export default function PortalSidebar() {
|
|
const pathname = usePathname();
|
|
|
|
function handleDisconnect() {
|
|
window.location.href = '/';
|
|
}
|
|
|
|
return (
|
|
<aside className="fixed left-0 top-0 bottom-0 w-56 flex flex-col glass border-r border-surface-800 z-50">
|
|
{/* Logo */}
|
|
<div className="flex items-center gap-2.5 px-5 h-14 border-b border-surface-800 shrink-0">
|
|
<div className="w-7 h-7 rounded-lg bg-gradient-to-br from-brand-500 to-accent-purple flex items-center justify-center text-xs font-bold text-white">
|
|
M
|
|
</div>
|
|
<span className="text-sm font-semibold text-white">IPFS Portal</span>
|
|
</div>
|
|
|
|
{/* Nav */}
|
|
<nav className="flex-1 p-3 space-y-1 overflow-y-auto">
|
|
{NAV_ITEMS.map((item) => {
|
|
const active = pathname === item.href;
|
|
return (
|
|
<Link
|
|
key={item.href}
|
|
href={item.href}
|
|
className={`flex items-center gap-3 px-3 py-2 rounded-lg text-sm transition-all duration-150 ${
|
|
active
|
|
? 'bg-brand-500/10 text-brand-400 border border-brand-500/20'
|
|
: 'text-surface-400 hover:text-surface-200 hover:bg-surface-800/50 border border-transparent'
|
|
}`}
|
|
>
|
|
<item.icon className="w-4 h-4 shrink-0" />
|
|
{item.label}
|
|
</Link>
|
|
);
|
|
})}
|
|
</nav>
|
|
|
|
{/* Disconnect */}
|
|
<div className="p-3 border-t border-surface-800">
|
|
<button
|
|
onClick={handleDisconnect}
|
|
className="flex items-center gap-3 w-full px-3 py-2 rounded-lg text-sm text-surface-500 hover:text-accent-rose hover:bg-accent-rose/5 transition-all duration-150"
|
|
>
|
|
<LogOut className="w-4 h-4 shrink-0" />
|
|
Disconnect
|
|
</button>
|
|
</div>
|
|
</aside>
|
|
);
|
|
}
|