import { useNavigate } from "react-router";
import { RichTreeView } from '@mui/x-tree-view/RichTreeView';

import './sidebar.css';


export default function Sidebar({ files }) {
	const navigate = useNavigate();

	const onSelect = (_, i) => {
		navigate(`/file/${i}`);
	};

	return <div className="sidebar">
		<h1>🧀🥜</h1>
		<hr/>
		<RichTreeView items={files} onItemClick={onSelect} getItemLabel={p => p.title} />
	</div>;
}