115 lines
4.5 KiB
TypeScript
115 lines
4.5 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { usePathname } from "next/navigation";
|
|
import { Logo } from "../../components/shared/Logo";
|
|
|
|
const navItems = [
|
|
{
|
|
label: "Dashboard",
|
|
href: "/dashboard",
|
|
icon: (
|
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-4 0a1 1 0 01-1-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 01-1 1" />
|
|
</svg>
|
|
),
|
|
},
|
|
{
|
|
label: "Editor",
|
|
href: "/editor",
|
|
icon: (
|
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
|
|
</svg>
|
|
),
|
|
},
|
|
{
|
|
label: "Apps",
|
|
href: "/apps",
|
|
icon: (
|
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zm10 0a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zm10 0a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" />
|
|
</svg>
|
|
),
|
|
},
|
|
{
|
|
label: "Tests",
|
|
href: "/tests",
|
|
icon: (
|
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
),
|
|
},
|
|
{
|
|
label: "Deploy",
|
|
href: "/deploy",
|
|
icon: (
|
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15.59 14.37a6 6 0 01-5.84 7.38v-4.8m5.84-2.58a14.98 14.98 0 006.16-12.12A14.98 14.98 0 009.631 8.41m5.96 5.96a14.926 14.926 0 01-5.841 2.58m-.119-8.54a6 6 0 00-7.381 5.84h4.8m2.581-5.84a14.927 14.927 0 00-2.58 5.84m2.699 2.7c-.103.021-.207.041-.311.06a15.09 15.09 0 01-2.448-2.448 14.9 14.9 0 01.06-.312m-2.24 2.39a4.493 4.493 0 00-1.757 4.306 4.493 4.493 0 004.306-1.758M16.5 9a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z" />
|
|
</svg>
|
|
),
|
|
},
|
|
{
|
|
label: "Marketplace",
|
|
href: "/marketplace",
|
|
icon: (
|
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 100 4 2 2 0 000-4z" />
|
|
</svg>
|
|
),
|
|
},
|
|
];
|
|
|
|
export default function DashboardLayout({
|
|
children,
|
|
}: {
|
|
children: React.ReactNode;
|
|
}) {
|
|
const pathname = usePathname();
|
|
|
|
return (
|
|
<div className="flex h-screen bg-gray-950 text-white">
|
|
{/* ─── NAV RAIL ─── */}
|
|
<aside className="w-[72px] bg-gray-900 border-r border-gray-800 flex flex-col items-center py-5 flex-shrink-0">
|
|
{/* Logo */}
|
|
<Link href="/dashboard" className="mb-8">
|
|
<Logo size="sm" iconOnly />
|
|
</Link>
|
|
|
|
{/* Nav items */}
|
|
<nav className="flex flex-col items-center gap-1 flex-1">
|
|
{navItems.map((item) => {
|
|
const isActive = pathname === item.href;
|
|
return (
|
|
<Link
|
|
key={item.label}
|
|
href={item.href}
|
|
className={`w-12 h-12 flex flex-col items-center justify-center rounded-xl transition-all group ${
|
|
isActive
|
|
? "bg-indigo-600/20 text-indigo-400"
|
|
: "text-gray-500 hover:text-gray-300 hover:bg-gray-800"
|
|
}`}
|
|
title={item.label}
|
|
>
|
|
{item.icon}
|
|
<span className="text-[10px] mt-0.5 font-medium">{item.label}</span>
|
|
</Link>
|
|
);
|
|
})}
|
|
</nav>
|
|
|
|
{/* User Avatar */}
|
|
<div className="mt-auto">
|
|
<div className="w-9 h-9 rounded-full bg-gray-700 border-2 border-gray-600 flex items-center justify-center text-xs font-bold text-gray-300 cursor-pointer hover:border-indigo-500 transition-colors">
|
|
J
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
|
|
{/* ─── MAIN CONTENT ─── */}
|
|
<main className="flex-1 flex flex-col overflow-hidden">{children}</main>
|
|
</div>
|
|
);
|
|
}
|