NeahNew/app/missions/layout.tsx
2025-05-05 00:01:30 +02:00

47 lines
1.6 KiB
TypeScript

"use client";
import React from "react";
import Link from "next/link";
import { usePathname } from "next/navigation";
export default function MissionsLayout({
children,
}: {
children: React.ReactNode;
}) {
const pathname = usePathname();
return (
<main className="w-full h-screen bg-white">
<div className="w-full h-full px-4 pt-12 pb-4 flex">
{/* Sidebar with light pink background */}
<div className="w-[234px] min-w-[234px] bg-pink-50 border-r border-gray-100 overflow-y-auto">
{/* Title section */}
<div className="bg-pink-50 py-4 px-6 border-b border-pink-100">
<h2 className="text-lg font-medium text-gray-800">CAP</h2>
<p className="text-xs text-gray-600">Centre d'Administration et de Pilotage</p>
</div>
{/* Navigation links */}
<nav className="mt-4">
<Link href="/missions" passHref>
<div className={`px-6 py-[10px] ${pathname === "/missions" ? "bg-white" : ""} hover:bg-white`}>
<span className="text-sm font-normal text-gray-700">Mes Missions</span>
</div>
</Link>
<Link href="/missions/new" passHref>
<div className={`px-6 py-[10px] ${pathname === "/missions/new" ? "bg-white" : ""} hover:bg-white`}>
<span className="text-sm font-normal text-gray-700">Nouvelle Mission</span>
</div>
</Link>
</nav>
</div>
{/* Main content - white background */}
<div className="flex-1 overflow-auto bg-white">
{children}
</div>
</div>
</main>
);
}