NeahNew/app/missions/layout.tsx
2025-05-04 23:38:49 +02:00

56 lines
1.6 KiB
TypeScript

"use client";
import React from "react";
import { ScrollArea } from "@/components/ui/scroll-area";
import { Button } from "@/components/ui/button";
import { Kanban, Plus } from "lucide-react";
import Link from "next/link";
import { usePathname } from "next/navigation";
export default function MissionsLayout({
children,
}: {
children: React.ReactNode;
}) {
const pathname = usePathname();
return (
<div className="flex h-[calc(100vh-4rem)] overflow-hidden">
{/* Sidebar */}
<div className="hidden md:flex w-64 border-r flex-col bg-white">
<div className="p-4 border-b">
<h2 className="text-xl font-semibold flex items-center">
<Kanban className="mr-2 h-5 w-5" />
Missions
</h2>
</div>
<ScrollArea className="flex-1">
<div className="p-3 space-y-1">
<Link href="/missions" passHref>
<Button
variant={pathname === "/missions" ? "secondary" : "ghost"}
className="w-full justify-start text-left"
>
Mes Missions
</Button>
</Link>
<Link href="/missions/new" passHref>
<Button
variant={pathname === "/missions/new" ? "secondary" : "ghost"}
className="w-full justify-start text-left"
>
<Plus className="mr-2 h-4 w-4" />
Poster une Mission
</Button>
</Link>
</div>
</ScrollArea>
</div>
{/* Main content */}
<div className="flex-1 overflow-auto">
{children}
</div>
</div>
);
}