Menu from the backend

Render menu via backend

Berry is already loading few menus from backend for sample purpose. You can refer following area to check how its working:

1. Open the file menu.ts (src/store/slices/menu.ts), and check API URL in the getMenu function.

const response = await axios.get('/api/menu/widget');

1. Open the file App.tsx (src/App.tsx), and check 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 />;
    ...
}

1. Check code in src/menu-items/widget.tsx. Icons and locale have been set according to API response in that.

2. Open the file src/layout/MainLayout/MenuList/index.tsx, and check 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);
        }
    };
    ...
}