diff --git a/app/components/layout/Menu.tsx b/app/components/layout/Menu.tsx index 67267e9d0..dc5783180 100644 --- a/app/components/layout/Menu.tsx +++ b/app/components/layout/Menu.tsx @@ -3,6 +3,8 @@ import { Link } from "@remix-run/react"; import navItems from "./nav-items.json"; import { Image } from "../Image"; import { useIsMounted } from "~/hooks/useIsMounted"; +import { canPerformAdminActions } from "~/permissions"; +import { useUser } from "~/modules/auth"; export function Menu({ expanded, @@ -11,15 +13,24 @@ export function Menu({ expanded: boolean; closeMenu: () => void; }) { + const user = useUser(); const isMounted = useIsMounted(); // without this menu is initially visible due to SSR and not knowing user screen width on server (probably) if (!isMounted) return null; + const visibleNavItems = navItems.filter((navItem) => { + if (navItem.name === "admin") { + return canPerformAdminActions(user); + } + + return true; + }); + return (