GithubBackup/Foxel
1
0
Fork 0
mirror of https://github.com/DrizzleTime/Foxel.git synced 2026-05-17 22:17:38 +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

4
web/src/layout/SideNav.tsx
View File

@@ -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) => {

6
web/src/layout/nav.ts
View File

@@ -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' }
]
}