ProjectSidebar.tsx

import { Link, useLocation } from "react-router";
import { Button } from "@/components/ui/button";
import { LayoutDashboard, Settings, ArrowLeft, Database } from "lucide-react";

interface ProjectSidebarProps {
    project: {
        id: number;
        name: string;
    };
}

export function ProjectSidebar({ project }: ProjectSidebarProps) {
    const location = useLocation();

    const isActive = (path: string) => {
        return location.pathname === path || location.pathname.startsWith(`${path}/`);
    };

    return (
        <aside className="w-64 border-r border-sky-100 bg-white/50 backdrop-blur-md flex flex-col h-full z-20">
            {/* Project Header */}
            <div className="p-6 border-b border-sky-100">
                <div className="flex items-center space-x-3 mb-1">
                    <div className="h-10 w-10 bg-sky-100 rounded-lg flex items-center justify-center text-sky-600">
                        <Database className="h-6 w-6" />
                    </div>
                    <div>
                        <h2 className="font-bold text-sky-900 truncate max-w-[140px]" title={project.name}>
                            {project.name}
                        </h2>
                        <span className="text-xs text-sky-500 font-medium">Project</span>
                    </div>
                </div>
            </div>

            {/* Navigation */}
            <nav className="flex-1 p-4 space-y-1 overflow-y-auto">
                <Link to={`/project/${project.id}`}>
                    <Button
                        variant="ghost"
                        className={`w-full justify-start ${isActive(`/project/${project.id}`) && !location.pathname.includes('settings') ? 'bg-sky-100 text-sky-900' : 'text-sky-700 hover:text-sky-900 hover:bg-sky-50'}`}
                    >
                        <LayoutDashboard className="mr-3 h-4 w-4" />
                        Dashboard
                    </Button>
                </Link>
                <Link to={`/project/${project.id}/settings/members`}>
                    <Button
                        variant="ghost"
                        className={`w-full justify-start ${isActive(`/project/${project.id}/settings/members`) ? 'bg-sky-100 text-sky-900' : 'text-sky-700 hover:text-sky-900 hover:bg-sky-50'}`}
                    >
                        <Settings className="mr-3 h-4 w-4" />
                        Members
                    </Button>
                </Link>
            </nav>

            {/* Footer */}
            <div className="p-4 border-t border-sky-100">
                <Link to="/">
                    <Button variant="ghost" className="w-full justify-start text-sky-600 hover:text-sky-800 hover:bg-sky-50">
                        <ArrowLeft className="mr-3 h-4 w-4" />
                        Back to Home
                    </Button>
                </Link>
            </div>
        </aside>
    );
}