How to optimize permissions on my front-end?

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?

Add a role/permission, or array of roles/permissions, field to the links array objects. These values should match a user.permissions object key.

Example:

const links = [
  {
    id: 1,
    text: "panel",
    path: "/",
    icon: <IoBarChartSharp />,
    menuItems: ["panel"],
    roles: null, // <-- any role/permission
  },
  {
    id: 2,
    text: "employee",
    // path: "all-jobs",
    path: ["add-employee", "all-employee"],
    icon: <MdQueryStats />,
    menuItems: [
      "add new employee",
      // "أدوار الموظفين",
      "all employees",
      // "الموظف المثالي",
    ],
    roles: ["addEmployee"], // <-- only addEmployee role/permission
  },
  {
    id: 3,
    text: "customer",
    // path: "add-job",
    path: ["add-customer", "emp-customers", "all-customers"],
    icon: <FaWpforms />,
    menuItems: [
      "add new customer",
      // "ارسال عميل",
      // "الحسابات المنتظرة",
      "my customers",
      "all customers",
    ],
    roles: ["addCustomer", "showAllCustomers"], // <-- addCustomer or showAllCustomers role/permission
  },
  {
    id: 4,
    text: "التقارير",
    // path: 'profile',
    path: ["profile", "aw", "all-jobs", "add-job"],
    icon: <ImProfile />,
    menuItems: [
      "add customer",
      "customer Roles",
      "all customers",
      "الموظف المثالي",
    ],
    roles: ["showAllCustomers"], // <-- etc...
  },
];

Then filter the links array prior to mapping them.

{links
  .filter(link => link.roles?.length
    // if there are link roles to check, check them against the user permissions
    ? link.roles.some(role => user.permissions[role])
    // otherwise return true to include menu link item
    : true
  )
  .map((link) => {
    ...
  })
}