From 50f5c042c3ba60cdeb22f208fc4f0265a3093178 Mon Sep 17 00:00:00 2001
From: falendikategar <falendikapratama@gmail.com>
Date: Mon, 4 Nov 2024 12:42:55 +0700
Subject: [PATCH] update: adjustment of sidebar menu items displayed according
 to each role

---
 apps/frontend/src/components/AppNavbar.tsx | 22 ++++++++++++++++++++--
 1 file changed, 20 insertions(+), 2 deletions(-)

diff --git a/apps/frontend/src/components/AppNavbar.tsx b/apps/frontend/src/components/AppNavbar.tsx
index d0b1dde..d1c2e79 100644
--- a/apps/frontend/src/components/AppNavbar.tsx
+++ b/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}