To add a menu from the backend, you can follow the steps below:
Open the file menu.ts
(src/api/menu.ts), and edit the API URL in the useGetMenu function
export const endpoints = {
key: 'api/menu',
dashboard: '/dashboard' // server URL
};
export function useGetMenu() {
const { data, isLoading, error, isValidating } = useSWR(endpoints.key + endpoints.dashboard, fetcher, {
revalidateIfStale: false,
revalidateOnFocus: false,
revalidateOnReconnect: false
});
const memoizedValue = useMemo(
() => ({
menu: data?.dashboard as NavItemType,
menuLoading: isLoading,
menuError: error,
menuValidating: isValidating,
menuEmpty: !isLoading && !data?.length
}),
[data, error, isLoading, isValidating]
);
return memoizedValue;
}
Add file menu.tsx
in src/menu-items, and copy the code from dashboard.tsx
(src/menu-items/). Set icons and local files according to API response.
Open the file index.tsx
(src/layout/Dashboard/Drawer/DrawerContent/Navigation/index.tsx), and add the below code of the line.
import { useGetMenu } from 'api/menu';
import menuItem from 'menu-items';
function isFound(arr: any, str: string) {
return arr.items.some((element: any) => {
if (element.id === str) {
return true;
}
return false;
});
}
// ==============================|| DRAWER CONTENT - NAVIGATION ||============================== //
export default function Navigation() {
const { menuLoading } = useGetMenu();
const [menuItems, setMenuItems] = useState<{ items: NavItemType[] }>({ items: [] });
useLayoutEffect(() => {
if (menuLoading && !isFound(menuItem, 'group-dashboard-loading')) {
menuItem.items.splice(0, 0, dashboardMenu);
setMenuItems({ items: [...menuItem.items] });
} else if (!menuLoading && dashboardMenu?.id !== undefined && !isFound(menuItem, 'group-dashboard')) {
menuItem.items.splice(0, 1, dashboardMenu);
setMenuItems({ items: [...menuItem.items] });
} else {
setMenuItems({ items: [...menuItem.items] });
}
// eslint-disable-next-line
}, [menuLoading]);
...
}