I have a navbar and set of permissions coming from the backend I stored them inside user object in my global context, and I can reach them by typinguser.permissions
{addCustomer: false, editAndDeleteCustomer: false, showAllCustomers: false, addEmployee: false, editAndDeleteEmployee: false, …}
How can I optimize my Navlinks by just displaying the True fields?
for example: if addCustomer is false, add customer shouldn’t appear in menuItems and so on.
here is my code:
const NavLinks = ({ ToggleSideBar }) => {
const { user } = useAppContext();
const links = [
{
id: 1,
text: "panel",
path: "/",
icon: <IoBarChartSharp />,
menuItems: ["panel"],
},
{
id: 2,
text: "employee",
// path: "all-jobs",
path: ["add-employee", "all-employee"],
icon: <MdQueryStats />,
menuItems: [
"add new employee",
// "أدوار الموظفين",
"all employees",
// "الموظف المثالي",
],
},
{
id: 3,
text: "customer",
// path: "add-job",
path: ["add-customer", "emp-customers", "all-customers"],
icon: <FaWpforms />,
menuItems: [
"add new customer",
// "ارسال عميل",
// "الحسابات المنتظرة",
"my customers",
"all customers",
],
},
{
id: 4,
text: "التقارير",
// path: 'profile',
path: ["profile", "aw", "all-jobs", "add-job"],
icon: <ImProfile />,
menuItems: [
"add customer",
"customer Roles",
"all customers",
"الموظف المثالي",
],
},
];
const [isDropdownOpen2, setIsDropdownOpen2] = useState(false);
const [isDropdownOpen3, setIsDropdownOpen3] = useState(false);
const toggleDropdown2 = () => {
setIsDropdownOpen2(!isDropdownOpen2);
};
const toggleDropdown3 = () => {
setIsDropdownOpen3(!isDropdownOpen3);
};
const [activeStatus, setActiveStatus] = useState({
firstnavcontainer: false,
secondnavcontainer: false,
thirdnavcontainer: false,
});
const firstFunction = () => {
setActiveStatus((prevState) => ({
firstnavcontainer: true,
secondnavcontainer: false,
thirdnavcontainer: false,
}));
};
const secondFunction = () => {
setActiveStatus((prevState) => ({
...prevState,
firstnavcontainer: false,
secondnavcontainer: true,
thirdnavcontainer: false,
}));
console.log(activeStatus);
};
const thirdFunction = () => {
setActiveStatus((prevState) => ({
...prevState,
firstnavcontainer: false,
secondnavcontainer: false,
thirdnavcontainer: true,
}));
};
return (
<div className="nav-links">
{links.map((link) => {
const { text, path, id, icon, menuItems } = link;
return (
<>
{/* first item */}
{id === 1 && (
<div className="nav-item extra" onClick={firstFunction}>
<ul className="dropdown-menu">
{menuItems.map((item, index) => (
<NavLink
to={path[index]}
// onClick={ToggleSideBar}
className={({ isActive }) =>
isActive
? "dropdownmenu-item red-background"
: "dropdownmenu-item"
}
>
<div className="dropdown-itemcontainer">
<span className="dropdown-itemtext">{item}</span>
</div>
</NavLink>
))}
</ul>
</div>
)}
{/* second section */}
{id === 2 && (
<div className="nav-item extra" onClick={secondFunction}>
<button
className={`dropdown-toggle ${
activeStatus.secondnavcontainer ? "red-background" : ""
}`}
>
<div className="dropdownbtn">
<span className="icon">{icon}</span>
<span>{text}</span>
</div>
<BsChevronDown
className="dropdown-icon"
onClick={toggleDropdown2}
/>
</button>
{isDropdownOpen2 && (
<ul className="dropdown-menu">
{menuItems.map((item, index) => (
<NavLink
to={path[index]}
// onClick={ToggleSideBar}
className={({ isActive }) =>
isActive
? "dropdownmenu-item active"
: "dropdownmenu-item"
}
>
<div className="dropdown-itemcontainer">
<span className="dropdown-itemtext">{item}</span>
</div>
</NavLink>
))}
</ul>
)}
</div>
)}
{/* third section */}
{id === 3 && (
<div className="nav-item extra" onClick={thirdFunction}>
<button
className={`dropdown-toggle ${
activeStatus.thirdnavcontainer ? "red-background" : ""
}`}
>
<div className="dropdownbtn">
<span className="icon">{icon}</span>
<span>{text}</span>
</div>
<BsChevronDown
className="dropdown-icon"
onClick={toggleDropdown3}
/>
</button>
{isDropdownOpen3 && (
<ul className="dropdown-menu">
{menuItems.map((item, index) => (
<NavLink
to={path[index]}
// onClick={ToggleSideBar}
className={({ isActive }) =>
isActive
? "dropdownmenu-item active"
: "dropdownmenu-item"
}
>
<div className="dropdown-itemcontainer">
<span className="dropdown-itemtext">{item}</span>
</div>
</NavLink>
))}
</ul>
)}
</div>
)}
</>
);
})}
</div>
);
};
export default NavLinks;
Since It is a permissions-related problem, is there another approach to do this?
