components/editor/sidebar.tsx

"use client";
import { TbChevronDown } from "react-icons/tb";
import classNames from "classnames";

import { API_COLLECTIONS } from "@/utils/datas/api_collections";
import { Method } from "@/components/method";
import { ApiRoute } from "@/utils/type";
import Link from "next/link";

export const EditorSidebar = ({
  collections,
  endpoint,
  onCollections,
  onEndpoint,
}: {
  collections: string[];
  endpoint: ApiRoute | null;
  onCollections: (collections: string[]) => void;
  onEndpoint: (endpoint: ApiRoute) => void;
}) => {
  const handleSetActiveCollection = (key: string) => {
    if (collections.includes(key)) {
      onCollections(collections.filter((col) => col !== key));
    } else {
      onCollections([...collections, key]);
    }
  };
  return (
    <ul className="min-w-[300px] max-w-sm w-full bg-slate-900 border-r border-slate-700/40 h-full overflow-auto">
      {API_COLLECTIONS.map((collection, c) => (
        <li key={collection.key} className="block w-full">
          <div
            className={classNames(
              "p-4 border-b border-slate-700/70 text-slate-400 cursor-pointer hover:bg-slate-700/30 flex items-center justify-between transition-all duration-200 select-none active:bg-indigo-600 active:text-slate-100",
              {
                "bg-indigo-600 !text-slate-100 hover:!bg-indigo-600 !border-indigo-500":
                  collections.includes(collection.key),
              }
            )}
            onClick={() => handleSetActiveCollection(collection.key)}
          >
            <p className="font-semibold uppercase text-xs flex items-center justify-between">
              {collection.key} API
            </p>
            <TbChevronDown
              className={classNames(
                "text-slate-400 transition-all duration-200",
                {
                  "transform rotate-180 !text-slate-100": collections.includes(
                    collection.key
                  ),
                }
              )}
            />
          </div>
          {collections.includes(collection.key) && (
            <div className="bg-slate-700/20 w-full p-3 border-b border-slate-700/70">
              <ul className="w-full">
                {collection.endpoints.map((end, e) => (
                  <Link
                    key={e}
                    href={`/${collection.key}/${e}`}
                    className={classNames(
                      "text-slate-400 font-semibold text-xs flex items-center justify-start gap-2 rounded-md p-2.5 hover:bg-slate-600 hover:bg-opacity-10 cursor-pointer border-t border-b border-transparent select-none",
                      {
                        "bg-slate-600 bg-opacity-20 hover:!bg-opacity-20 !text-slate-200 border-b !border-b-slate-700/70 border-t !border-t-slate-800":
                          endpoint?.path === end.path &&
                          endpoint?.method === end.method,
                      }
                    )}
                    onClick={() => onEndpoint(end)}
                  >
                    <Method method={end.method} />
                    <p className="truncate">{end.path}</p>
                  </Link>
                ))}
              </ul>
            </div>
          )}
        </li>
      ))}
    </ul>
  );
};