From 93552152be180766fda08b1bd7ccefc4d26065ff Mon Sep 17 00:00:00 2001
From: Lieuwe Rooijakkers <lieuwerooijakkers@gmail.com>
Date: Sun, 19 Jan 2025 22:21:32 +0100
Subject: client advancements

---
 .../src/routes/app/components/sidebar/sidebar.css  | 24 ++++++++++++++++++++++
 .../src/routes/app/components/sidebar/sidebar.jsx  | 19 +++++++++++++++++
 2 files changed, 43 insertions(+)
 create mode 100644 client/src/routes/app/components/sidebar/sidebar.css
 create mode 100644 client/src/routes/app/components/sidebar/sidebar.jsx

(limited to 'client/src/routes/app/components/sidebar')

diff --git a/client/src/routes/app/components/sidebar/sidebar.css b/client/src/routes/app/components/sidebar/sidebar.css
new file mode 100644
index 0000000..515117a
--- /dev/null
+++ b/client/src/routes/app/components/sidebar/sidebar.css
@@ -0,0 +1,24 @@
+.sidebar {
+	width: 200px;
+	background-color: #f2f2f2;
+
+	flex-shrink: 0;
+
+	h1 {
+		margin-left: 10px;
+		margin-top: 10px;
+	}
+
+	.file {
+		display: block;
+
+		color: black;
+		text-decoration: none;
+
+		padding: 5px;
+	}
+
+	.file:hover {
+		background-color: #e4e4e4;
+	}
+}
diff --git a/client/src/routes/app/components/sidebar/sidebar.jsx b/client/src/routes/app/components/sidebar/sidebar.jsx
new file mode 100644
index 0000000..1ce7d2b
--- /dev/null
+++ b/client/src/routes/app/components/sidebar/sidebar.jsx
@@ -0,0 +1,19 @@
+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>;
+}
-- 
cgit v1.2.3-70-g09d2