41 lines
1.5 KiB
JavaScript
41 lines
1.5 KiB
JavaScript
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 = ({open, setOpen}) => {
|
|
const navigate = useNavigate();
|
|
const params = useParams();
|
|
|
|
const update = (path) => {
|
|
navigate(path.replace(":id", params.id));
|
|
setOpen(false);
|
|
}
|
|
|
|
return (
|
|
<>
|
|
{open && <div className="sidebar-overlay" onClick={() => setOpen(false)}/>}
|
|
<aside className={open ? "active" : ""}>
|
|
<div className="header" onClick={() => update("/")}>
|
|
<img src="/assets/images/logo192.png" alt="sheepstar"/>
|
|
<h1>Sheepstar</h1>
|
|
</div>
|
|
|
|
{sidebar.map((page) => {
|
|
const current = getPage(window.location.pathname);
|
|
|
|
if (page.route) return;
|
|
|
|
return (
|
|
<div className={"sidebar-item" + (current.route === page.path || current.path === page.path ? " item-active" : "")}
|
|
key={page.name} onClick={() => update(page.path)}>
|
|
<FontAwesomeIcon icon={page.icon}/>
|
|
<h1>{page.name}</h1>
|
|
</div>
|
|
)
|
|
})}
|
|
</aside>
|
|
</>
|
|
)
|
|
} |