From 1c7833d09b3d4997dfead428d69350fd88e7359a Mon Sep 17 00:00:00 2001
From: Mathias Wagner <germannewsmaker@gmail.com>
Date: Mon, 13 Nov 2023 20:09:51 +0100
Subject: [PATCH] Created the Sidebar.jsx

---
 src/states/Manage/pages/Sidebar/Sidebar.jsx | 31 +++++++++++++++++++++
 1 file changed, 31 insertions(+)
 create mode 100644 src/states/Manage/pages/Sidebar/Sidebar.jsx

diff --git a/src/states/Manage/pages/Sidebar/Sidebar.jsx b/src/states/Manage/pages/Sidebar/Sidebar.jsx
new file mode 100644
index 0000000..03fedf8
--- /dev/null
+++ b/src/states/Manage/pages/Sidebar/Sidebar.jsx
@@ -0,0 +1,31 @@
+import "./styles.sass";
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+import sidebar from "@/states/Manage/pages/pages.jsx";
+import {useNavigate, useParams} from "react-router-dom";
+import {getPage} from "@/states/Manage/Manage.jsx";
+
+export const Sidebar = () => {
+    const navigate = useNavigate();
+    const params = useParams();
+
+    return (
+        <aside>
+            <div className="header" onClick={() => navigate("/")}>
+                <img src="/assets/images/logo192.png" alt="sheepstar"/>
+                <h1>Sheepstar</h1>
+            </div>
+
+            {sidebar.map((page) => {
+                const current = getPage(window.location.pathname);
+
+                return (
+                    <div className={"sidebar-item" + (current.path === page.path ? " item-active" : "")} key={page.name}
+                         onClick={() => navigate(page.path.replace(":id", params.id))}>
+                        <FontAwesomeIcon icon={page.icon} />
+                        <h1>{page.name}</h1>
+                    </div>
+                )
+            })}
+        </aside>
+    )
+}
\ No newline at end of file