diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx index 141da56..3ebb289 100644 --- a/src/components/Header/Header.tsx +++ b/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 = () => { }; const currentUserModalClose = () => setCurrentUserModal(false); + const navigationItems = availableNavigation(currentUser); + return ( <> @@ -55,7 +69,7 @@ const Header: React.FC = () => {
{/* 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) => (