diff --git a/src/components/AppBar.tsx b/src/components/AppBar.tsx index 59a79b2..77da314 100644 --- a/src/components/AppBar.tsx +++ b/src/components/AppBar.tsx @@ -21,15 +21,16 @@ import LoginContext from '../contexts/login.tsx'; const pages = [ - { label: "Home", path: '/'}, - { label: "Images", path: '/image-moderation' }, - { label: "Product", path: '/moderation' }, + { label: "Home", path: '/', showtoUsers: ['moderator', 'user'] }, + { label: "Images", path: '/image-moderation', showtoUsers: ['moderator'] }, + { label: "Product", path: '/moderation', showtoUsers: ['moderator'] }, ]; const settings = ['Logout']; function ResponsiveAppBar() { - const { isLoggedIn } = useContext(LoginContext); + const { isLoggedIn, isModerator } = useContext(LoginContext); + console.log(isLoggedIn, isModerator); const [anchorElNav, setAnchorElNav] = useState(null); const [anchorElUser, setAnchorElUser] = useState(null); @@ -60,6 +61,16 @@ function ResponsiveAppBar() { window.location.reload(); } + const filteredPages = isLoggedIn + ? pages.filter((page) => + isModerator ? page.showtoUsers.includes('moderator') : page.showtoUsers.includes('user') + ) + : + pages.filter((page) => page.showtoUsers.includes('user')); + + console.log(filteredPages); + + return ( @@ -121,7 +132,7 @@ function ResponsiveAppBar() { display: { xs: 'block', md: 'none' }, }} > - {pages.map((page) => ( + {filteredPages.map((page) => ( - {pages.map((page) => ( + {filteredPages.map((page) => (