Render Menu from the backend
Render menu via backend
Able Pro is already rendering the menu from the backend. The dashboard menus (Default, Analytics) are rendered via the back end.
You can check the Fack backend API here that we used to render the menu:
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 fromdashboard.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]);
...
}
Last updated