Remove menu render via backend

Remove menu via backend

VITE (TS)

In the Berry React admin, a few widget menus (i.e., Statistics, Data, and Chart) load from our mock API (GitHub repository). If you want to remove it from your admin panel, follow the steps below and remove/edit the suggested line of code.

1. Delete the menu-items file widget.tsx [src/menu-items]

2. Open file src/layout/MainLayout/MenuList/index.tsx and edit the line of code.

Form:

src/layout/MainLayout/MenuList/index.tsx

import { memo, useLayoutEffect, useState } from 'react';
...
import menuItem from 'menu-items';
import { useGetMenu, useGetMenuMaster } from 'api/menu';

To:

src/layout/MainLayout/MenuList/index.tsx

import { memo, useState } from 'react';
...
import menuItems from 'menu-items';
import { useGetMenuMaster } from 'api/menu';

1. Open file src/layout/MainLayout/MenuList/index.tsx and remove the line of code.

src/layout/MainLayout/MenuList/index.tsx

import { Menu } from 'menu-items/widget'

const MenuList = () => {
    ...		
    const { menuLoading } = useGetMenu();		
    ...		
    const [menuItems, setMenuItems] = useState<{ items: NavItemType[] }>({ items: [] });
    
    let widgetMenu = Menu();
    
    useLayoutEffect(() => {
            const isFound = menuItem.items.some((element) => {
                if (element.id === 'group-widget') {
                    return true;
                }
                return false;
            });
            if (menuLoading) {
                menuItem.items.splice(1, 0, widgetMenu);
                setMenuItems({ items: [...menuItem.items] });
            } else if (!menuLoading && widgetMenu?.id !== undefined && !isFound) {
                menuItem.items.splice(1, 1, widgetMenu);
                setMenuItems({ items: [...menuItem.items] });
            } else {
                setMenuItems({ items: [...menuItem.items] });
            }
            // eslint-disable-next-line react-hooks/exhaustive-deps
        }, [menuLoading]);
}

1. Open file src\api\menu.ts and edit the line of code.

From:

src\api\menu.ts

import { MenuProps } from 'types/menu';
import { NavItemType } from 'types';

To:

src\api\menu.ts

import { MenuProps } from 'types/menu';

1. Open the file src\api\menu.ts and remove the code below.

src\api\menu.ts

import { fetcher } from 'utils/axios';
	
export const endpoints = {
  ...
  widget: '/widget' // server URL
};
	
export function useGetMenu() {
  const { data, isLoading, error, isValidating } = useSWR(endpoints.key + endpoints.widget, fetcher, {
	revalidateIfStale: false,
	revalidateOnFocus: false,
	revalidateOnReconnect: false
  });

  const memoizedValue = useMemo(
	() => ({
	  menu: data?.widgetas NavItemType,
	  menuLoading: isLoading,
	  menuError: error,
	  menuValidating: isValidating,
	  menuEmpty: !isLoading && !data?.length
	}),
	[data, error, isLoading, isValidating]
  );

  return memoizedValue;
}

VITE (JS)

And in the Berry React admin, a few widget menus (i.e. Statistics, Data, and Chart) load from our mock API (GitHub repository). If you want to remove it from your admin panel, follow the steps below and remove/edit the suggested line of code.

1. Delete the menu-items file widget.jsx [src/menu-items]

2. Open file src/layout/MainLayout/MenuList/index.jsx and edit the line of code.

Form:

src/layout/MainLayout/MenuList/index.jsx

import { memo, useLayoutEffect, useState } from 'react';
...
import menuItem from 'menu-items';
import { useGetMenu, useGetMenuMaster } from 'api/menu';

To:

src/layout/MainLayout/MenuList/index.jsx

import { memo, useState } from 'react';
...
import menuItems from 'menu-items';
import { useGetMenuMaster } from 'api/menu';

1. Open file src/layout/MainLayout/MenuList/index.jsx and remove the line of code.

src/layout/MainLayout/MenuList/index.jsx

import { Menu } from 'menu-items/widget'

const MenuList = () => {
    ...		
    const { menuLoading } = useGetMenu();		
    ...		
    const [menuItems, setMenuItems] = useState<{ items: NavItemType[] }>({ items: [] });
    
    let widgetMenu = Menu();
    
    useLayoutEffect(() => {
            const isFound = menuItem.items.some((element) => {
                if (element.id === 'group-widget') {
                    return true;
                }
                return false;
            });
            if (menuLoading) {
                menuItem.items.splice(1, 0, widgetMenu);
                setMenuItems({ items: [...menuItem.items] });
            } else if (!menuLoading && widgetMenu?.id !== undefined && !isFound) {
                menuItem.items.splice(1, 1, widgetMenu);
                setMenuItems({ items: [...menuItem.items] });
            } else {
                setMenuItems({ items: [...menuItem.items] });
            }
            // eslint-disable-next-line react-hooks/exhaustive-deps
        }, [menuLoading]);
}

1. Open file src\api\menu.js and edit below line of code.

From:

src\api\menu.js

import { MenuProps } from 'types/menu';
import { NavItemType } from 'types';

To:

src\api\menu.js

import { MenuProps } from 'types/menu';

1. Open the file src\api\menu.js and remove the code below.

src\api\menu.js

import { fetcher } from 'utils/axios';
	
export const endpoints = {
  ...
  widget: '/widget' // server URL
};
	
export function useGetMenu() {
  const { data, isLoading, error, isValidating } = useSWR(endpoints.key + endpoints.widget, fetcher, {
	revalidateIfStale: false,
	revalidateOnFocus: false,
	revalidateOnReconnect: false
  });

  const memoizedValue = useMemo(
	() => ({
	  menu: data?.widgetas NavItemType,
	  menuLoading: isLoading,
	  menuError: error,
	  menuValidating: isValidating,
	  menuEmpty: !isLoading && !data?.length
	}),
	[data, error, isLoading, isValidating]
  );

  return memoizedValue;
}

NEXT (TS)

And in the Berry React admin, a few widget menus (i.e. Statistics, Data, and Chart) load from our mock API (GitHub repository). If you want to remove it from your admin panel, follow the steps below and remove/edit the suggested line of code.

1. Delete the menu-items file widget.tsx [src/menu-items]

2. Open file src/layout/MainLayout/MenuList/index.tsx and edit the line of code.

Form:

src/layout/MainLayout/MenuList/index.tsx

import { memo, useLayoutEffect, useState } from 'react';
...
import menuItem from 'menu-items';
import { useGetMenu, useGetMenuMaster } from 'api/menu';

To:

src/layout/MainLayout/MenuList/index.tsx

import { memo, useState } from 'react';
...
import menuItems from 'menu-items';
import { useGetMenuMaster } from 'api/menu';

1. Open file src/layout/MainLayout/MenuList/index.tsx and remove the below line of code.

src/layout/MainLayout/MenuList/index.tsx

import { Menu } from 'menu-items/widget'

const MenuList = () => {
    ...		
    const { menuLoading } = useGetMenu();		
    ...		
    const [menuItems, setMenuItems] = useState<{ items: NavItemType[] }>({ items: [] });
    
    let widgetMenu = Menu();
    
    useLayoutEffect(() => {
            const isFound = menuItem.items.some((element) => {
                if (element.id === 'group-widget') {
                    return true;
                }
                return false;
            });
            if (menuLoading) {
                menuItem.items.splice(1, 0, widgetMenu);
                setMenuItems({ items: [...menuItem.items] });
            } else if (!menuLoading && widgetMenu?.id !== undefined && !isFound) {
                menuItem.items.splice(1, 1, widgetMenu);
                setMenuItems({ items: [...menuItem.items] });
            } else {
                setMenuItems({ items: [...menuItem.items] });
            }
            // eslint-disable-next-line react-hooks/exhaustive-deps
        }, [menuLoading]);
}

1. Open file src\api\menu.ts and edit below line of code.

From:

src\api\menu.ts

import { MenuProps } from 'types/menu';
import { NavItemType } from 'types';

To:

src\api\menu.ts

import { MenuProps } from 'types/menu';

1. Open the file src\api\menu.ts and remove the code below.

src\api\menu.ts

import { fetcher } from 'utils/axios';
	
export const endpoints = {
  ...
  widget: '/widget' // server URL
};
	
export function useGetMenu() {
  const { data, isLoading, error, isValidating } = useSWR(endpoints.key + endpoints.widget, fetcher, {
	revalidateIfStale: false,
	revalidateOnFocus: false,
	revalidateOnReconnect: false
  });

  const memoizedValue = useMemo(
	() => ({
	  menu: data?.widgetas NavItemType,
	  menuLoading: isLoading,
	  menuError: error,
	  menuValidating: isValidating,
	  menuEmpty: !isLoading && !data?.length
	}),
	[data, error, isLoading, isValidating]
  );

  return memoizedValue;
}

NEXT (JS)

In the Berry React admin, a few widget menus (i.e. Statistics, Data, and Chart) load from our mock API (GitHub repository). If you want to remove it from your admin panel, follow the steps below and remove/edit the suggested line of code.

1. Delete the menu-items file widget.jsx [src/menu-items]

2. Open file src/layout/MainLayout/MenuList/index.jsx and edit the line of code.

Form:

src/layout/MainLayout/MenuList/index.jsx

import { memo, useLayoutEffect, useState } from 'react';
...
import menuItem from 'menu-items';
import { useGetMenu, useGetMenuMaster } from 'api/menu';

To:

src/layout/MainLayout/MenuList/index.jsx

import { memo, useState } from 'react';
...
import menuItems from 'menu-items';
import { useGetMenuMaster } from 'api/menu';

1. Open file src/layout/MainLayout/MenuList/index.jsx and remove the below line of code.

src/layout/MainLayout/MenuList/index.jsx

import { Menu } from 'menu-items/widget'

const MenuList = () => {
    ...		
    const { menuLoading } = useGetMenu();		
    ...		
    const [menuItems, setMenuItems] = useState<{ items: NavItemType[] }>({ items: [] });
    
    let widgetMenu = Menu();
    
    useLayoutEffect(() => {
            const isFound = menuItem.items.some((element) => {
                if (element.id === 'group-widget') {
                    return true;
                }
                return false;
            });
            if (menuLoading) {
                menuItem.items.splice(1, 0, widgetMenu);
                setMenuItems({ items: [...menuItem.items] });
            } else if (!menuLoading && widgetMenu?.id !== undefined && !isFound) {
                menuItem.items.splice(1, 1, widgetMenu);
                setMenuItems({ items: [...menuItem.items] });
            } else {
                setMenuItems({ items: [...menuItem.items] });
            }
            // eslint-disable-next-line react-hooks/exhaustive-deps
        }, [menuLoading]);
}

1. Open file src\api\menu.js and edit below line of code.

From:

src\api\menu.js

import { MenuProps } from 'types/menu';
import { NavItemType } from 'types';

To:

src\api\menu.js

import { MenuProps } from 'types/menu';

1. Open the file src\api\menu.js and remove the code below.

src\api\menu.js

import { fetcher } from 'utils/axios';
	
export const endpoints = {
  ...
  widget: '/widget' // server URL
};
	
export function useGetMenu() {
  const { data, isLoading, error, isValidating } = useSWR(endpoints.key + endpoints.widget, fetcher, {
	revalidateIfStale: false,
	revalidateOnFocus: false,
	revalidateOnReconnect: false
  });

  const memoizedValue = useMemo(
	() => ({
	  menu: data?.widgetas NavItemType,
	  menuLoading: isLoading,
	  menuError: error,
	  menuValidating: isValidating,
	  menuEmpty: !isLoading && !data?.length
	}),
	[data, error, isLoading, isValidating]
  );

  return memoizedValue;
}