rowboat/apps/rowboat/app/projects/[projectId]/nav.tsx

'use client';
import { Tooltip } from "@nextui-org/react";
import Link from "next/link";
import { useEffect, useState } from "react";
import clsx from "clsx";
import Menu from "./menu";
import { getProjectConfig } from "@/app/actions";
import { ChevronsLeftIcon, ChevronsRightIcon, FolderOpenIcon, PanelLeftCloseIcon, PanelLeftOpenIcon } from "lucide-react";

export function Nav({
    projectId,
}: {
    projectId: string;
}) {
    const [collapsed, setCollapsed] = useState(false);
    const [projectName, setProjectName] = useState<string | null>(null);

    useEffect(() => {
        async function getProject() {
            const project = await getProjectConfig(projectId);
            setProjectName(project.name);
        }
        getProject();
    }, [projectId]);

    function toggleCollapse() {
        setCollapsed(!collapsed);
    }

    return <div className={clsx("shrink-0 flex flex-col gap-2 border-r-1 border-gray-100 relative p-2", {
        "w-40": !collapsed,
        "w-10": collapsed
    })}>
        <Tooltip content={collapsed ? "Expand" : "Collapse"} showArrow placement="right">
            <button onClick={toggleCollapse} className="absolute bottom-[50px] right-2 text-gray-400 hover:text-black w-[28px] h-[28px]">
                {!collapsed && <PanelLeftCloseIcon size={16} className="m-auto" />}
                {collapsed && <PanelLeftOpenIcon size={16} className="m-auto" />}
            </button>
        </Tooltip>
        {!collapsed && <div className="flex flex-col gap-1">
            <Tooltip content="Change project" showArrow placement="bottom-end">
                <Link className="relative group flex flex-col px-2 py-2 border border-gray-200 rounded-md hover:border-gray-500" href="/projects">
                    <div className="absolute top-[-7px] left-1 px-1 bg-gray-100 text-xs text-gray-400 group-hover:text-gray-600">
                        Project
                    </div>
                    <div className="flex flex-row items-center gap-2">
                        <FolderOpenIcon size={16} />
                        <div className="truncate text-sm">
                            {projectName || projectId}
                        </div>
                    </div>
                </Link>
            </Tooltip>
        </div>}
        {collapsed && <Tooltip content="Change project" showArrow placement="right">
            <Link href="/projects">
                <FolderOpenIcon size={16} className="ml-1" />
            </Link>
        </Tooltip>}
        <Menu projectId={projectId} collapsed={collapsed} />
    </div>;
}