66 lines
2.7 KiB
TypeScript
66 lines
2.7 KiB
TypeScript
"use client";
|
|
|
|
import React from "react";
|
|
import Link from "next/link";
|
|
import { usePathname } from "next/navigation";
|
|
import { Plus, Users, FolderKanban } from "lucide-react";
|
|
|
|
export default function MissionsLayout({
|
|
children,
|
|
}: {
|
|
children: React.ReactNode;
|
|
}) {
|
|
const pathname = usePathname();
|
|
|
|
// Check if we're on the equipe page or its subpages
|
|
const isEquipePage = pathname === "/missions/equipe" || pathname.startsWith("/missions/equipe/");
|
|
// Check if we're on the missions list or a mission detail page
|
|
const isMissionsPage = pathname === "/missions" || (pathname.startsWith("/missions/") && !isEquipePage && pathname !== "/missions/new");
|
|
const isNewMissionPage = pathname === "/missions/new";
|
|
|
|
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">
|
|
{/* Équipe link */}
|
|
<Link href="/missions/equipe" passHref>
|
|
<div className={`px-6 py-[10px] flex items-center gap-2 ${isEquipePage ? "bg-white" : ""} hover:bg-white transition-colors`}>
|
|
<Users className="h-4 w-4 text-gray-600" />
|
|
<span className="text-sm font-normal text-gray-700">Équipe</span>
|
|
</div>
|
|
</Link>
|
|
|
|
{/* Mes Missions with + button */}
|
|
<div className={`px-6 py-[10px] flex items-center justify-between ${isMissionsPage ? "bg-white" : ""} hover:bg-white transition-colors group`}>
|
|
<Link href="/missions" className="flex items-center gap-2 flex-1">
|
|
<FolderKanban className="h-4 w-4 text-gray-600" />
|
|
<span className="text-sm font-normal text-gray-700">Mes Missions</span>
|
|
</Link>
|
|
<Link
|
|
href="/missions/new"
|
|
className={`p-1 rounded-md hover:bg-blue-100 transition-colors ${isNewMissionPage ? "bg-blue-100" : ""}`}
|
|
title="Nouvelle Mission"
|
|
>
|
|
<Plus className="h-4 w-4 text-blue-600" />
|
|
</Link>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
|
|
{/* Main content - white background */}
|
|
<div className="flex-1 overflow-auto bg-white">
|
|
{children}
|
|
</div>
|
|
</div>
|
|
</main>
|
|
);
|
|
}
|