GithubBackup/Foxel
1
0
Fork 0
mirror of https://github.com/DrizzleTime/Foxel.git synced 2026-08-28 19:46:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(SideNav): add hideOnMobile property to NavItem and filter nav items based on mobile view

Browse Source
This commit is contained in:
shiyu
2026-03-09 16:47:21 +08:00
parent 072ccea5be
commit 338c72cd5c
2 changed files with 5 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/layout/SideNav.tsx
+2 -2
View File
@@ -59,10 +59,10 @@ const SideNav = memo(function SideNav({
return navGroups return navGroups
.map((group) => ({ .map((group) => ({
...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); .filter((group) => group.children.length > 0);
}, [user]); }, [mobile, user]);
useEffect(() => { useEffect(() => {
getLatestVersion().then((resp) => { getLatestVersion().then((resp) => {
web/src/layout/nav.ts
+3 -3
View File
@@ -15,7 +15,7 @@ import {
} from '@ant-design/icons'; } from '@ant-design/icons';
import type { ReactNode } from 'react'; 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 interface NavGroup { key: string; title?: string; children: NavItem[]; }
export const navGroups: NavGroup[] = [ export const navGroups: NavGroup[] = [
@@ -30,7 +30,7 @@ export const navGroups: NavGroup[] = [
key: 'manage', key: 'manage',
title: 'Manage', title: 'Manage',
children: [ 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: 'tasks', icon: React.createElement(RobotOutlined), label: 'Automation' },
{ key: 'task-queue', icon: React.createElement(ClockCircleOutlined), label: 'Task Queue' }, { key: 'task-queue', icon: React.createElement(ClockCircleOutlined), label: 'Task Queue' },
{ key: 'share', icon: React.createElement(ShareAltOutlined), label: 'My Shares' }, { key: 'share', icon: React.createElement(ShareAltOutlined), label: 'My Shares' },
@@ -45,7 +45,7 @@ export const navGroups: NavGroup[] = [
children: [ children: [
{ key: 'users', icon: React.createElement(UserOutlined), label: 'User Management', adminOnly: true }, { key: 'users', icon: React.createElement(UserOutlined), label: 'User Management', adminOnly: true },
{ key: 'settings', icon: React.createElement(SettingOutlined), label: 'System Settings', 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' } { key: 'audit', icon: React.createElement(BugOutlined), label: 'Audit Logs' }
] ]
} }