Created the Sidebar.jsx

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>
+    )
+}