Forgot Passaord

frontend/src/widgets/layout/sidenav.jsx

@@ -1,18 +1,15 @@
 import PropTypes from "prop-types";
 import { Link, NavLink } from "react-router-dom";
 import { XMarkIcon } from "@heroicons/react/24/outline";
-import {
-  Avatar,
-  Button,
-  IconButton,
-  Typography,
-} from "@material-tailwind/react";
+import { Avatar, Button, IconButton, Typography } from "@material-tailwind/react";
 import { useMaterialTailwindController, setOpenSidenav } from "@/components";
+import { useAuth } from "@/components/AuthProvider.jsx";
 import logo from "@/assets/images/stackpulse.png";
 
 export function Sidenav({ brandImg, brandName, routes }) {
   const [controller, dispatch] = useMaterialTailwindController();
   const { sidenavColor, sidenavType, openSidenav } = controller;
+  const { initialized: authInitialized, hasPermission } = useAuth();
   const sidenavTypes = {
     dark: "bg-gradient-to-br from-gray-800 to-gray-900",
     white: "bg-white shadow-sm",
@@ -38,8 +35,28 @@ export function Sidenav({ brandImg, brandName, routes }) {
         </IconButton>
       </div>
       <div className="m-4">
-        {routes.map(({ layout, title, pages }, key) => (
-          <ul key={key} className="mb-4 flex flex-col gap-1">
+        {routes.map(({ layout, title, pages }, key) => {
+          const visiblePages = pages.filter(({ permission }) => {
+            if (!permission || !permission.key) {
+              return true;
+            }
+            if (!authInitialized) {
+              return false;
+            }
+            const requiredLevel = permission.requiredLevel || permission.level || "full";
+            return hasPermission(permission.key, requiredLevel);
+          });
+
+          if (layout !== "dashboard" && layout !== "auth") {
+            return null;
+          }
+
+          if (visiblePages.length === 0 && !title) {
+            return null;
+          }
+
+          return (
+            <ul key={key} className="mb-4 flex flex-col gap-1">
             {title && (
               <li className="mx-3.5 mt-4 mb-2">
                 <Typography
@@ -51,7 +68,7 @@ export function Sidenav({ brandImg, brandName, routes }) {
                 </Typography>
               </li>
             )}
-            {pages.map(({ icon, name, path }) => (
+            {visiblePages.map(({ icon, name, path }) => (
               <li key={name}>
                 <NavLink to={`/${layout}${path}`}>
                   {({ isActive }) => (
@@ -78,9 +95,10 @@ export function Sidenav({ brandImg, brandName, routes }) {
                   )}
                 </NavLink>
               </li>
-            ))}
+              ))}
           </ul>
-        ))}
+          );
+        })}
       </div>
     </aside>
   );