update: adjustment of sidebar menu items displayed according to each role

apps/frontend/src/components/AppNavbar.tsx

@@ -5,6 +5,7 @@ import { useState, useEffect } from "react";
 import { useLocation } from "@tanstack/react-router";
 import { ScrollArea } from "@/shadcn/components/ui/scroll-area";
 import AppHeader from "./AppHeader";
+import useAuth from "@/hooks/useAuth";
 
 // import MenuItem from "./SidebarMenuItem";
 // import { useAuth } from "@/modules/auth/contexts/AuthContext";
@@ -16,7 +17,8 @@ import AppHeader from "./AppHeader";
  * @returns A React element representing the application's navigation bar.
  */
 export default function AppNavbar() {
-	// const {user} = useAuth();
+	const { user } = useAuth();
+	// const userRole = JSON.parse(localStorage.getItem('userRole') || '{}');
 
 	const { pathname } = useLocation();
 	const pathsThatCloseSidebar = ["/assessmentResult", "/assessment"];
@@ -66,6 +68,22 @@ export default function AppNavbar() {
 		}
 	})
 
+	// Filter sidebar menu items according to user role
+	const filteredData = data?.filter(menu => {
+		if (user?.role === "super-admin") {
+			return [
+				"/users", 
+				"/aspect", 
+				"/questions",
+				"/assessmentRequestManagements",
+				"/assessmentResultsManagement",
+			].includes(menu.link as string);
+		} else if (user?.role === "user") {
+			return ["/assessmentRequest"].includes(menu.link as string);
+		}
+		return false; // If role is not recognized, show nothing
+	});
+
 	return (
 		<>
 			<div>
@@ -79,7 +97,7 @@ export default function AppNavbar() {
 				${isSidebarOpen ? 'translate-x-0' : '-translate-x-full'}`}
 				>
 					<ScrollArea className="flex flex-1 h-full">
-						{data?.map((menu, i) => (
+						{filteredData?.map((menu, i) => (
 							<MenuItem
 								key={i}
 								menu={menu}