Add a menu from the backend
Render menu via backend
To add a menu from the backend, you can follow the steps below:
Open the file menu.ts (src/store/slices/menu.ts), and edit API URL in the getMenu function.
const response = await axios.get(
'/api/menu/widget'
);
Open the file App.tsx (src/App.tsx), and add the below code of the line.
import { useEffect, useState } from 'react';
import Loader from 'ui-component/Loader';
import { dispatch } from 'store';
import { getMenu } from 'store/slices/menu';
const App = () => {
...
const [loading, setLoading] = useState<boolean>(false);
useEffect(() => {
dispatch(getMenu()).then(() => {
setLoading(true);
});
}, []);
if (!loading) return <Loader />;
...
}
Add file menu.tsx in src/menu-items, and copy code from widget.tsx (src/menu-items/). Set icons and local files according to API response.
Open the file index.tsx (src/layout/MainLayout/MenuList/index.tsx), and add the below code of the line.
import { memo, useEffect } from 'react';
import { Menu } from 'menu-items/menu';
const MenuList = () => {
...
useEffect(() => {
handlerMenuItem();
// eslint-disable-next-line
}, []);
let getMenu = Menu();
const handlerMenuItem = () => {
const isFound = menuItem.items.some((element) => {
// use root parent id according to response instead of 'menu'
if (element.id === 'menu') {
return true;
}
return false;
});
if (getMenu?.id !== undefined && !isFound) {
menuItem.items.splice(1, 0, getMenu);
}
};
...
}
Was this helpful?