From 0de181af68fa608a6a4a6d30f42428ca2c790c4e Mon Sep 17 00:00:00 2001 From: potter Date: Thu, 13 Nov 2025 15:01:49 +0800 Subject: [PATCH 1/2] fix: navigation permission --- .../components/navbar/side-nav-bar-mobile.tsx | 40 ++++++++++++++++--- src/src/components/navbar/side-nav-bar.tsx | 40 ++++++++++++++++--- src/src/components/role/RoleList.tsx | 15 ++++--- src/src/config.ts | 19 +++++++-- 4 files changed, 93 insertions(+), 21 deletions(-) diff --git a/src/src/components/navbar/side-nav-bar-mobile.tsx b/src/src/components/navbar/side-nav-bar-mobile.tsx index 131dec63..d825490b 100644 --- a/src/src/components/navbar/side-nav-bar-mobile.tsx +++ b/src/src/components/navbar/side-nav-bar-mobile.tsx @@ -12,13 +12,15 @@ import { AdminMenus } from '@/config' import { ChevronDown, ChevronRight, CircleUser, Menu, Package2, Settings, User, LogOut } from 'lucide-react' import Link from 'next/link' import { usePathname } from 'next/navigation' -import { useState } from 'react' +import { useState, useMemo } from 'react' import ClientLink from '../ui/client-link' import useSession from '@/useSession' +import { useGrantedPolicies } from '@/lib/hooks/useGrantedPolicies' export default function SideNavBarMobile() { const pathname = usePathname() const sessionData = useSession() + const { can } = useGrantedPolicies() // Initialize expanded menus based on current path const getInitialExpandedMenus = () => { @@ -36,6 +38,29 @@ export default function SideNavBarMobile() { const [expandedMenus, setExpandedMenus] = useState>(getInitialExpandedMenus()) + // Filter menus based on permissions + const visibleMenus = useMemo(() => { + return AdminMenus.filter((menu) => { + // If menu has policy, check permission + if (menu.policy && !can(menu.policy)) { + return false + } + + // If menu has submenus, check if at least one submenu is visible + if (menu.submenus && menu.submenus.length > 0) { + const visibleSubmenus = menu.submenus.filter((submenu) => { + // If submenu has policy, check permission; otherwise show it + return !submenu.policy || can(submenu.policy) + }) + // Show parent menu only if at least one submenu is visible + return visibleSubmenus.length > 0 + } + + // Menu without policy or with permission is visible + return true + }) + }, [can]) + const toggleMenu = (menuName: string) => { const newExpandedMenus = new Set(expandedMenus) if (newExpandedMenus.has(menuName)) { @@ -81,11 +106,16 @@ export default function SideNavBarMobile() { {/* Mobile Navigation */}