SheepstarStudio/Dashboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Updated the Sidebar.jsx

Browse Source
This commit is contained in:
Mathias Wagner 2023-11-13 22:03:13 +01:00
parent 527a7f240f
commit 22a94cc4a3
Signed by: Mathias
GPG Key ID: B8DC354B0A1F5B44
1 changed files with 26 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
src/states/Manage/pages/Sidebar/Sidebar.jsx
View File

@ -4,28 +4,37 @@ import sidebar from "@/states/Manage/pages/pages.jsx";
import {useNavigate, useParams} from "react-router-dom"; import {useNavigate, useParams} from "react-router-dom";
import {getPage} from "@/states/Manage/Manage.jsx"; import {getPage} from "@/states/Manage/Manage.jsx";
export const Sidebar = () => { export const Sidebar = ({open, setOpen}) => {
const navigate = useNavigate(); const navigate = useNavigate();
const params = useParams(); const params = useParams();
const update = (path) => {
navigate(path.replace(":id", params.id));
setOpen(false);
}
return ( return (
<aside> <>
<div className="header" onClick={() => navigate("/")}> {open && <div className="sidebar-overlay" onClick={() => setOpen(false)}/>}
<img src="/assets/images/logo192.png" alt="sheepstar"/> <aside className={open ? "active" : ""}>
<h1>Sheepstar</h1> <div className="header" onClick={() => update("/")}>
</div> <img src="/assets/images/logo192.png" alt="sheepstar"/>
<h1>Sheepstar</h1>
</div>
{sidebar.map((page) => { {sidebar.map((page) => {
const current = getPage(window.location.pathname); const current = getPage(window.location.pathname);
return ( return (
<div className={"sidebar-item" + (current.path === page.path ? " item-active" : "")} key={page.name} <div className={"sidebar-item" + (current.path === page.path ? " item-active" : "")}
onClick={() => navigate(page.path.replace(":id", params.id))}> key={page.name}
<FontAwesomeIcon icon={page.icon} /> onClick={() => update(page.path)}>
<h1>{page.name}</h1> <FontAwesomeIcon icon={page.icon}/>
</div> <h1>{page.name}</h1>
) </div>
})} )
</aside> })}
</aside>
</>
) )
} }