56 lines
1.8 KiB
JavaScript
56 lines
1.8 KiB
JavaScript
import React, { useContext, useEffect } from 'react';
|
|
import { useSelector, useDispatch } from 'react-redux';
|
|
import { setSelectedTab } from '../../store/navigationSlice';
|
|
import "./SideNavigation.css";
|
|
import TreeTab from "./SideTabs/TreeTab";
|
|
import TemplateTab from "./SideTabs/TemplateTab";
|
|
import { AuthContext } from "../../AuthProvider";
|
|
|
|
const SideNavigation = () => {
|
|
const { roles } = useContext(AuthContext);
|
|
const selectedTab = useSelector(state => state.navigation.selectedTab);
|
|
const dispatch = useDispatch();
|
|
|
|
const allTabs = [
|
|
{ id: "tree", label: "Tree", component: <TreeTab /> },
|
|
{ id: "templates", label: "Templates", component: <TemplateTab /> },
|
|
];
|
|
|
|
const visibleTabs = roles.includes("admin")
|
|
? allTabs
|
|
: allTabs.filter(tab => tab.id === "tree");
|
|
|
|
useEffect(() => {
|
|
if (!visibleTabs.find(tab => tab.id === selectedTab)) {
|
|
dispatch(setSelectedTab(visibleTabs[0]?.id || ""));
|
|
}
|
|
}, [visibleTabs, selectedTab, dispatch]);
|
|
|
|
|
|
const current = visibleTabs.find(t => t.id === selectedTab);
|
|
|
|
return (
|
|
<aside className="side-nav">
|
|
<div className="tabs is-small">
|
|
<ul>
|
|
{visibleTabs.map(tab => (
|
|
<li
|
|
key={tab.id}
|
|
className={tab.id === selectedTab ? "is-active" : ""}
|
|
>
|
|
<a onClick={() => dispatch(setSelectedTab(tab.id))}>
|
|
{tab.label}
|
|
</a>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
<div className="tab-content">
|
|
{current?.component}
|
|
</div>
|
|
</aside>
|
|
);
|
|
};
|
|
|
|
export default SideNavigation;
|