Add a menu from the backend

Render menu via backend

To add a menu from the backend, you can follow the steps below:

1. 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');

2. 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 />;
    ...
}

3. 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.

4. 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);
        }
    };
    ...
}