142 lines
2.8 KiB
JavaScript
142 lines
2.8 KiB
JavaScript
import {
|
|
NavLink,
|
|
useLocation
|
|
} from "react-router-dom";
|
|
|
|
|
|
const menus = [
|
|
{name: "Dashboard", path: "/"},
|
|
{name: "Prediksi Satu Ulasan", path: "/prediksi"},
|
|
{name: "Analisis CSV", path: "/analisis-csv"},
|
|
{name: "Riwayat Analisis", path: "/riwayat"},
|
|
{name: "Training & Riwayat Model", path: "/riwayat-model"},
|
|
{name: "Penelitian & Model Awal", path: "/penelitian-model"}
|
|
];
|
|
|
|
|
|
function Sidebar() {
|
|
const location =
|
|
useLocation();
|
|
|
|
|
|
/* ==========================================================
|
|
MENENTUKAN MENU AKTIF
|
|
========================================================== */
|
|
|
|
const isMenuActive =
|
|
(menuPath) => {
|
|
const pathname =
|
|
location.pathname;
|
|
|
|
|
|
if (menuPath === "/") {
|
|
return pathname === "/";
|
|
}
|
|
|
|
|
|
/*
|
|
Halaman detail hasil analisis merupakan
|
|
bagian dari Riwayat Analisis.
|
|
*/
|
|
|
|
if (
|
|
menuPath === "/riwayat"
|
|
) {
|
|
return (
|
|
pathname ===
|
|
"/riwayat" ||
|
|
pathname.startsWith(
|
|
"/hasil-analisis/"
|
|
)
|
|
);
|
|
}
|
|
|
|
|
|
return (
|
|
pathname === menuPath
|
|
);
|
|
};
|
|
|
|
|
|
/* ==========================================================
|
|
TAMPILAN
|
|
========================================================== */
|
|
|
|
return (
|
|
<aside className="sidebar">
|
|
|
|
{/* ======================================================
|
|
BRAND
|
|
====================================================== */}
|
|
|
|
<div className="sidebar-brand">
|
|
|
|
<div className="brand-logo">
|
|
S
|
|
</div>
|
|
|
|
<div>
|
|
<h2>
|
|
S-Learn
|
|
</h2>
|
|
|
|
<p>
|
|
Analisis Sentimen
|
|
</p>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
{/* ======================================================
|
|
NAVIGASI
|
|
====================================================== */}
|
|
|
|
<nav className="sidebar-menu">
|
|
|
|
{menus.map(
|
|
(menu) => {
|
|
const aktif =
|
|
isMenuActive(
|
|
menu.path
|
|
);
|
|
|
|
return (
|
|
<NavLink
|
|
key={
|
|
menu.path
|
|
}
|
|
to={
|
|
menu.path
|
|
}
|
|
end={
|
|
menu.path === "/"
|
|
}
|
|
aria-current={
|
|
aktif
|
|
? "page"
|
|
: undefined
|
|
}
|
|
className={
|
|
`sidebar-link ${
|
|
aktif
|
|
? "active"
|
|
: ""
|
|
}`
|
|
}
|
|
>
|
|
{menu.name}
|
|
</NavLink>
|
|
);
|
|
}
|
|
)}
|
|
|
|
</nav>
|
|
|
|
</aside>
|
|
);
|
|
}
|
|
|
|
|
|
export default Sidebar;
|