remove 'users' from navigation for role User

src/components/Header/Header.tsx

@@ -5,17 +5,29 @@ import { useAuth } from 'src/services/auth';
 import Gravatar from 'react-gravatar';
 import { Link, useLocation } from 'react-router-dom';
 import clsx from 'clsx';
+import { User, UserRole } from 'src/services/users';
 import { CurrentUserModal } from './components/CurrentUserModal';
 
 const navigation = [
-  { name: 'Dashboard', to: '/dashboard' },
-  { name: 'Users', to: '/users' },
+  { name: 'Dashboard', to: '/dashboard', roles: ['admin', 'user'] },
+  { name: 'Users', to: '/users', roles: ['admin'] },
 ];
 
 function classNames(...classes: any[]) {
   return classes.filter(Boolean).join(' ');
 }
 
+function availableNavigation(currentUser: User | null) {
+  if (currentUser === null) {
+    return [];
+  }
+  const userDashboardRole = currentUser.app_roles.find((appRole) => appRole.name?.toLowerCase() === 'dashboard')!.role;
+
+  return navigation.filter((item) =>
+    item.roles.includes(String(userDashboardRole != null ? userDashboardRole : UserRole.User)),
+  );
+}
+
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
 interface HeaderProps {}
 
@@ -30,6 +42,8 @@ const Header: React.FC<HeaderProps> = () => {
   };
   const currentUserModalClose = () => setCurrentUserModal(false);
 
+  const navigationItems = availableNavigation(currentUser);
+
   return (
     <>
       <Disclosure as="nav" className="bg-white shadow relative z-10">
@@ -55,7 +69,7 @@ const Header: React.FC<HeaderProps> = () => {
                   </Link>
                   <div className="hidden sm:ml-6 sm:flex sm:space-x-8">
                     {/* Current: "border-primary-500 text-gray-900", Default: "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700" */}
-                    {navigation.map((item) => (
+                    {navigationItems.map((item) => (
                       <Link
                         key={item.name}
                         to={item.to}