Spaces:
Sleeping
Sleeping
File size: 3,403 Bytes
5916048 d2a6779 5916048 d2a6779 5916048 d2a6779 5916048 6294700 5916048 d2a6779 5916048 5be784e 5916048 5be784e 5916048 6294700 5916048 5be784e 5916048 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 |
"use client";
import { TbChevronDown } from "react-icons/tb";
import Link from "next/link";
import { usePathname } from "next/navigation";
import classNames from "classnames";
import { API_COLLECTIONS } from "@/utils/datas/api_collections";
import { Method } from "@/components/method";
export const EditorSidebar = ({
collections,
open,
onCollections,
}: {
collections: string[];
open: boolean;
onCollections: (collections: string[]) => void;
}) => {
const pathname = usePathname();
const handleSetActiveCollection = (key: string) => {
if (collections.includes(key)) {
onCollections(collections.filter((col) => col !== key));
} else {
onCollections([...collections, key]);
}
};
return (
<ul
className={classNames(
"min-w-[300px] transition-all duration-200 xl:max-w-sm w-2/3 xl:w-full bg-slate-900 border-r border-slate-700/40 xl:!h-full overflow-auto fixed top-[56px] xl:top-0 left-0 xl:relative z-10 -translate-x-full xl:!translate-x-0",
{
"translate-x-0 h-[calc(100%-56px)]": open,
}
)}
>
{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":
pathname.includes(`/${collection.key}/${e}`),
}
)}
>
<Method method={end.method} />
<p className="truncate">{end.path}</p>
</Link>
))}
</ul>
</div>
)}
</li>
))}
</ul>
);
};
|