# Remove menu render via backend

{% tabs %}
{% tab title="VITE (TS)" %}
In the Berry React admin, a few **widget menus (i.e., Statistics, Data, and Chart)** load from our mock API ([GitHub repository](https://github.com/phoenixcoded20/mock-data-api-nextjs)). 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:**

{% code title="src/layout/MainLayout/MenuList/index.tsx" %}

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

{% endcode %}

**To:** 

{% code title="src/layout/MainLayout/MenuList/index.tsx" %}

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

{% endcode %}

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

{% code title="src/layout/MainLayout/MenuList/index.tsx" %}

```typescript
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]);
}
```

{% endcode %}

4. **Open file** `src\api\menu.ts` **and edit the line of code.**

**From:**&#x20;

{% code title="src\api\menu.ts" %}

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

{% endcode %}

**To:**

{% code title="src\api\menu.ts" %}

```typescript
import { MenuProps } from 'types/menu';
```

{% endcode %}

4. **Open the file** `src\api\menu.ts` **and remove the code below.**&#x20;

{% code title="src\api\menu.ts" %}

```typescript
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;
}
```

{% endcode %}
{% endtab %}

{% tab title="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](https://github.com/phoenixcoded20/mock-data-api-nextjs)). 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:**

{% code title="src/layout/MainLayout/MenuList/index.jsx" %}

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

{% endcode %}

**To:**&#x20;

{% code title="src/layout/MainLayout/MenuList/index.jsx" %}

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

{% endcode %}

2. **Open file** `src/layout/MainLayout/MenuList/index.jsx` **and remove the line of code.**&#x20;

{% code title="src/layout/MainLayout/MenuList/index.jsx" %}

```javascript
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]);
}
```

{% endcode %}

4. **Open file** `src\api\menu.js` **and edit below line of code.**

**From:**&#x20;

{% code title="src\api\menu.js" %}

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

{% endcode %}

**To:**

{% code title="src\api\menu.js" %}

```javascript
import { MenuProps } from 'types/menu';
```

{% endcode %}

4. **Open the file** `src\api\menu.js` **and remove the code below.**&#x20;

{% code title="src\api\menu.js" %}

```javascript
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;
}
```

{% endcode %}
{% endtab %}

{% tab title="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](https://github.com/phoenixcoded20/mock-data-api-nextjs)). 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:**

{% code title="src/layout/MainLayout/MenuList/index.tsx" %}

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

{% endcode %}

**To:**&#x20;

{% code title="src/layout/MainLayout/MenuList/index.tsx" %}

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

{% endcode %}

2. **Open file** `src/layout/MainLayout/MenuList/index.tsx` **and remove the below line of code.**&#x20;

{% code title="src/layout/MainLayout/MenuList/index.tsx" %}

```typescript
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]);
}
```

{% endcode %}

4. **Open file** `src\api\menu.ts` **and edit below line of code.**

**From:**&#x20;

{% code title="src\api\menu.ts" %}

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

{% endcode %}

**To:**

{% code title="src\api\menu.ts" %}

```typescript
import { MenuProps } from 'types/menu';
```

{% endcode %}

4. **Open the file** `src\api\menu.ts` **and remove the code below.**&#x20;

{% code title="src\api\menu.ts" %}

```typescript
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;
}
```

{% endcode %}
{% endtab %}

{% tab title="NEXT (JS)" %}
In the Berry React admin, a few **widget menus (i.e. Statistics, Data, and Chart)** load from our mock API ([GitHub repository](https://github.com/phoenixcoded20/mock-data-api-nextjs)). 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:**

{% code title="src/layout/MainLayout/MenuList/index.jsx" %}

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

{% endcode %}

**To:**&#x20;

{% code title="src/layout/MainLayout/MenuList/index.jsx" %}

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

{% endcode %}

2. **Open file** `src/layout/MainLayout/MenuList/index.jsx` **and remove the line of code.**&#x20;

{% code title="src/layout/MainLayout/MenuList/index.jsx" %}

```javascript
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]);
}
```

{% endcode %}

4. **Open file** `src\api\menu.js` **and edit below line of code.**

**From:**&#x20;

{% code title="src\api\menu.js" %}

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

{% endcode %}

**To:**

{% code title="src\api\menu.js" %}

```javascript
import { MenuProps } from 'types/menu';
```

{% endcode %}

4. **Open the file** `src\api\menu.js` **and remove the code below.**&#x20;

{% code title="src\api\menu.js" %}

```javascript
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;
}
```

{% endcode %}
{% endtab %}
{% endtabs %}