diff --git a/web/src/layout/SideNav.tsx b/web/src/layout/SideNav.tsx index 5a1b283..dcf5ef2 100644 --- a/web/src/layout/SideNav.tsx +++ b/web/src/layout/SideNav.tsx @@ -59,10 +59,10 @@ const SideNav = memo(function SideNav({ return navGroups .map((group) => ({ ...group, - children: group.children.filter((item) => !item.adminOnly || isAdmin), + children: group.children.filter((item) => (!item.adminOnly || isAdmin) && !(mobile && item.hideOnMobile)), })) .filter((group) => group.children.length > 0); - }, [user]); + }, [mobile, user]); useEffect(() => { getLatestVersion().then((resp) => { diff --git a/web/src/layout/nav.ts b/web/src/layout/nav.ts index 7f6d6fe..295898c 100644 --- a/web/src/layout/nav.ts +++ b/web/src/layout/nav.ts @@ -15,7 +15,7 @@ import { } from '@ant-design/icons'; import type { ReactNode } from 'react'; -export interface NavItem { key: string; icon: ReactNode; label: string; adminOnly?: boolean; } +export interface NavItem { key: string; icon: ReactNode; label: string; adminOnly?: boolean; hideOnMobile?: boolean; } export interface NavGroup { key: string; title?: string; children: NavItem[]; } export const navGroups: NavGroup[] = [ @@ -30,7 +30,7 @@ export const navGroups: NavGroup[] = [ key: 'manage', title: 'Manage', children: [ - { key: 'processors', icon: React.createElement(CodeOutlined), label: 'Processors' }, + { key: 'processors', icon: React.createElement(CodeOutlined), label: 'Processors', hideOnMobile: true }, { key: 'tasks', icon: React.createElement(RobotOutlined), label: 'Automation' }, { key: 'task-queue', icon: React.createElement(ClockCircleOutlined), label: 'Task Queue' }, { key: 'share', icon: React.createElement(ShareAltOutlined), label: 'My Shares' }, @@ -45,7 +45,7 @@ export const navGroups: NavGroup[] = [ children: [ { key: 'users', icon: React.createElement(UserOutlined), label: 'User Management', adminOnly: true }, { key: 'settings', icon: React.createElement(SettingOutlined), label: 'System Settings', adminOnly: true }, - { key: 'backup', icon: React.createElement(DatabaseOutlined), label: 'Backup & Restore' }, + { key: 'backup', icon: React.createElement(DatabaseOutlined), label: 'Backup & Restore', hideOnMobile: true }, { key: 'audit', icon: React.createElement(BugOutlined), label: 'Audit Logs' } ] }