File size: 3,541 Bytes
6f0655f |
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 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 |
"use client";
import Link from "next/link";
import React from "react";
interface SidebarProps {
datasetInfo: any;
paginatedEpisodes: any[];
episodeId: any;
totalPages: number;
currentPage: number;
prevPage: () => void;
nextPage: () => void;
}
const Sidebar: React.FC<SidebarProps> = ({
datasetInfo,
paginatedEpisodes,
episodeId,
totalPages,
currentPage,
prevPage,
nextPage,
}) => {
const [sidebarVisible, setSidebarVisible] = React.useState(true);
const toggleSidebar = () => setSidebarVisible((prev) => !prev);
const sidebarRef = React.useRef<HTMLDivElement>(null);
React.useEffect(() => {
if (!sidebarVisible) return;
function handleClickOutside(event: MouseEvent) {
// If click is outside the sidebar nav
if (
sidebarRef.current &&
!sidebarRef.current.contains(event.target as Node)
) {
setTimeout(() => setSidebarVisible(false), 500);
}
}
document.addEventListener("mousedown", handleClickOutside);
return () => {
document.removeEventListener("mousedown", handleClickOutside);
};
}, [sidebarVisible]);
return (
<div className="flex z-10 min-h-screen absolute md:static" ref={sidebarRef}>
<nav
className={`shrink-0 overflow-y-auto bg-slate-900 p-5 break-words md:max-h-screen w-60 md:shrink ${
!sidebarVisible ? "hidden" : ""
}`}
aria-label="Sidebar navigation"
>
<ul>
<li>Number of samples/frames: {datasetInfo.total_frames}</li>
<li>Number of episodes: {datasetInfo.total_episodes}</li>
<li>Frames per second: {datasetInfo.fps}</li>
</ul>
<p>Episodes:</p>
{/* episodes menu for medium & large screens */}
<div className="ml-2 block">
<ul>
{paginatedEpisodes.map((episode) => (
<li key={episode} className="mt-0.5 font-mono text-sm">
<Link
href={`./episode_${episode}`}
className={`underline ${episode === episodeId ? "-ml-1 font-bold" : ""}`}
>
Episode {episode}
</Link>
</li>
))}
</ul>
{totalPages > 1 && (
<div className="mt-3 flex items-center text-xs">
<button
onClick={prevPage}
className={`mr-2 rounded bg-slate-800 px-2 py-1 ${
currentPage === 1 ? "cursor-not-allowed opacity-50" : ""
}`}
disabled={currentPage === 1}
>
« Prev
</button>
<span className="mr-2 font-mono">
{currentPage} / {totalPages}
</span>
<button
onClick={nextPage}
className={`rounded bg-slate-800 px-2 py-1 ${
currentPage === totalPages
? "cursor-not-allowed opacity-50"
: ""
}`}
disabled={currentPage === totalPages}
>
Next »
</button>
</div>
)}
</div>
</nav>
{/* Toggle sidebar button */}
<button
className="mx-1 flex items-center opacity-50 hover:opacity-100 focus:outline-none focus:ring-0"
onClick={toggleSidebar}
title="Toggle sidebar"
>
<div className="h-10 w-2 rounded-full bg-slate-500"></div>
</button>
</div>
);
};
export default Sidebar;
|