add custom Sider menuItem in a separate file
I've a customSider where I have successfully insert my own menu item in.
useEffect(() => {
const existingIndex = menuItems.findIndex(item => item.key === siderMenuItems.key);
if (existingIndex !== -1) {
// If an item with the same key exists, replace it
menuItems[existingIndex] = siderMenuItems;
} else {
// If not, push the new item
menuItems.push(siderMenuItems);
}
}, [menuItems, siderMenuItems]);
This is my siderMenuItems.ts
import React from 'react';
import { UnorderedListOutlined, DashboardOutlined, LogoutOutlined } from '@ant-design/icons';
export const siderMenuItems = [
{
icon: <DashboardOutlined />,
label: 'Dashboard',
route: '/',
key: 'dashboard',
name: 'DashboardResource',
children: [],
},
{
icon: <UnorderedListOutlined />,
label: 'Canvases',
route: '/canvases',
key: '/canvases',
name: 'canvases',
children: [],
canDelete: false,
canCreate: false,
canEdit: false,
canShow: false,
list: '/canvases',
},
// Add other menu items as needed
];
But when I add the icon in the error appears: 'DashboardOutlined' refers to a value, but is being used as a type here. Did you mean 'typeof DashboardOutlined'?ts(2749)
useEffect(() => {
const existingIndex = menuItems.findIndex(item => item.key === siderMenuItems.key);
if (existingIndex !== -1) {
// If an item with the same key exists, replace it
menuItems[existingIndex] = siderMenuItems;
} else {
// If not, push the new item
menuItems.push(siderMenuItems);
}
}, [menuItems, siderMenuItems]);
This is my siderMenuItems.ts
import React from 'react';
import { UnorderedListOutlined, DashboardOutlined, LogoutOutlined } from '@ant-design/icons';
export const siderMenuItems = [
{
icon: <DashboardOutlined />,
label: 'Dashboard',
route: '/',
key: 'dashboard',
name: 'DashboardResource',
children: [],
},
{
icon: <UnorderedListOutlined />,
label: 'Canvases',
route: '/canvases',
key: '/canvases',
name: 'canvases',
children: [],
canDelete: false,
canCreate: false,
canEdit: false,
canShow: false,
list: '/canvases',
},
// Add other menu items as needed
];
But when I add the icon in the error appears: 'DashboardOutlined' refers to a value, but is being used as a type here. Did you mean 'typeof DashboardOutlined'?ts(2749)
