# Remove menu render from Backend

{% tabs %}
{% tab title="VITE(TS)" %}
In the Mantis React admin, a few **dashboard menus (i.e. Default, Analytics, Components)** 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 menu-items file: `dashboard.tsx`
   1. `dashboard.tsx`\[`src/menu-items/dashboard.tsx`]
2. **Open the file** `src/layout/Dashboard/Drawer/DrawerContent/Navigation/index.tsx` **and edit the below line of code.** 

**Form:** 

{% code title="src/layout/Dashboard/Drawer/DrawerContent/Navigation/index.tsx" %}

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

{% endcode %}

**To:** 

{% code title="src/layout/Dashboard/Drawer/DrawerContent/Navigation/index.tsx" %}

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

{% endcode %}

3. **Open file** `src/layout/Dashboard/Drawer/DrawerContent/Navigation/index.tsx` **and remove the below line of code.**

{% code title="src/layout/Dashboard/Drawer/DrawerContent/Navigation/index.tsx" %}

```typescript
import { MenuFromAPI } from 'menu-items/dashboard';
	
export default function Navigation() {
	...		
	const { menuLoading } = useGetMenu();		
	...		
        const [menuItems, setMenuItems] = useState<{ items: NavItemType[] }>({ items: [] });

	let dashboardMenu = MenuFromAPI();
	
        useLayoutEffect(() => {
            const isFound = menuItem.items.some((element) => {
              if (element.id === 'group-dashboard') {
                return true;
              }
              return false;
            });
        
            if (menuLoading) {
              menuItem.items.splice(0, 0, dashboardMenu);
              setMenuItems({ items: [...menuItem.items] });
            } else if (!menuLoading && dashboardMenu?.id !== undefined && !isFound) {
              menuItem.items.splice(0, 1, dashboardMenu);
              setMenuItems({ items: [...menuItem.items] });
            } else {
              setMenuItems({ items: [...menuItem.items] });
            }
            // eslint-disable-next-line
  }, [menuLoading]);
}
```

{% endcode %}

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

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

```typescript
// project-imports
import { fetcher } from 'utils/axios';

import { NavItemType } from 'types/menu';
	
export const endpoints = {
  ...
  dashboard: '/dashboard' // server URL
};

const staticMenuItem = {
  id: 'invoice1',
  title: 'invoice',
  type: 'item',
  url: '/dashboard/invoice',
  breadcrumbs: false
};
	
export function useGetMenu() {
  const { data, isLoading, error, isValidating } = useSWR(endpoints.key + endpoints.dashboard, fetcher, {
    revalidateIfStale: false,
    revalidateOnFocus: false,
    revalidateOnReconnect: false
  });

  const memoizedValue = useMemo(() => {
    let updatedMenu = data?.dashboard;

    if (updatedMenu && Array.isArray(updatedMenu.children) && updatedMenu.children.length > 0) {
      updatedMenu = {
        ...updatedMenu,
        children: updatedMenu.children.map((group: NavItemType) => {
          if (Array.isArray(group.children)) {
            return {
              ...group,
              children: [...group.children, staticMenuItem]
            };
          }
          return group;
        })
      };
    }

    return {
      menu: updatedMenu as NavItemType,
      menuLoading: isLoading,
      menuError: error,
      menuValidating: isValidating,
      menuEmpty: !isLoading && !data?.length
    };
  }, [data, error, isLoading, isValidating]);

  return memoizedValue;
}
```

{% endcode %}

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

**Form:**

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

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

{% endcode %}

**To:**

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

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

{% endcode %}
{% endtab %}

{% tab title="VITE(JS)" %}
In the Mantis React admin, a few **dashboard menus (i.e. Default, Analytics, Components)** 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 menu-items file: `dashboard.jsx`
   1. `dashboard.tsx`\[`src/menu-items/dashboard.jsx`]
2. **Open the file** `src/layout/Dashboard/Drawer/DrawerContent/Navigation/index.jsx` **and edit the below line of code.**&#x20;

**Form:**&#x20;

{% code title="src/layout/Dashboard/Drawer/DrawerContent/Navigation/index.jsx" %}

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

{% endcode %}

**To:**&#x20;

{% code title="src/layout/Dashboard/Drawer/DrawerContent/Navigation/index.jsx" %}

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

{% endcode %}

3. **Open file** `src/layout/Dashboard/Drawer/DrawerContent/Navigation/index.jsx` **and remove the below line of code.**

{% code title="src/layout/Dashboard/Drawer/DrawerContent/Navigation/index.jsx" %}

```javascript
import { MenuFromAPI } from 'menu-items/dashboard';
	
export default function Navigation() {
	...		
	const { menuLoading } = useGetMenu();		
	...		
        const [menuItems, setMenuItems] = useState({ items: [] });

	let dashboardMenu = MenuFromAPI();
	
        useLayoutEffect(() => {
            const isFound = menuItem.items.some((element) => {
              if (element.id === 'group-dashboard') {
                return true;
              }
              return false;
            });
        
            if (menuLoading) {
              menuItem.items.splice(0, 0, dashboardMenu);
              setMenuItems({ items: [...menuItem.items] });
            } else if (!menuLoading && dashboardMenu?.id !== undefined && !isFound) {
              menuItem.items.splice(0, 1, dashboardMenu);
              setMenuItems({ items: [...menuItem.items] });
            } else {
              setMenuItems({ items: [...menuItem.items] });
            }
            // eslint-disable-next-line
  }, [menuLoading]);
}
```

{% endcode %}

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

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

```typescript
// project-imports
import { fetcher } from 'utils/axios';
	
export const endpoints = {
  ...
  dashboard: '/dashboard' // server URL
};

const staticMenuItem = {
  id: 'invoice1',
  title: 'invoice',
  type: 'item',
  url: '/dashboard/invoice',
  breadcrumbs: false
};
	
export function useGetMenu() {
  const { data, isLoading, error, isValidating } = useSWR(endpoints.key + endpoints.dashboard, fetcher, {
    revalidateIfStale: false,
    revalidateOnFocus: false,
    revalidateOnReconnect: false
  });

  const memoizedValue = useMemo(() => {
    let updatedMenu = data?.dashboard;

    if (updatedMenu && Array.isArray(updatedMenu.children) && updatedMenu.children.length > 0) {
      updatedMenu = {
        ...updatedMenu,
        children: updatedMenu.children.map((group: NavItemType) => {
          if (Array.isArray(group.children)) {
            return {
              ...group,
              children: [...group.children, staticMenuItem]
            };
          }
          return group;
        })
      };
    }

    return {
      menu: updatedMenu,
      menuLoading: isLoading,
      menuError: error,
      menuValidating: isValidating,
      menuEmpty: !isLoading && !data?.length
    };
  }, [data, error, isLoading, isValidating]);

  return memoizedValue;
}
```

{% endcode %}
{% endtab %}

{% tab title="NEXT(TS)" %}
In the Mantis React admin, a few **dashboard menus (i.e. Default, Analytics, Components)** 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 menu-items file: `dashboard.tsx`
   1. `dashboard.tsx`\[`src/menu-items/dashboard.tsx`]
2. **Open the file** `src/layout/Dashboard/Drawer/DrawerContent/Navigation/index.tsx` **and edit the below line of code.**&#x20;

**Form:**&#x20;

{% code title="src/layout/DashboardLayout/Drawer/DrawerContent/Navigation/index.tsx" %}

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

{% endcode %}

**To:**&#x20;

{% code title="src/layout/DashboardLayout/Drawer/DrawerContent/Navigation/index.tsx" %}

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

{% endcode %}

3. **Open file** `src/layout/Dashboard/Drawer/DrawerContent/Navigation/index.tsx` **and remove the below line of code.**

{% code title="src/layout/Dashboard/Drawer/DrawerContent/Navigation/index.tsx" %}

```typescript
import { MenuFromAPI } from 'menu-items/dashboard';
	
export default function Navigation() {
	...		
	const { menuLoading } = useGetMenu();		
	...		
        const [menuItems, setMenuItems] = useState<{ items: NavItemType[] }>({ items: [] });

	let dashboardMenu = MenuFromAPI();
	
        useLayoutEffect(() => {
            const isFound = menuItem.items.some((element) => {
              if (element.id === 'group-dashboard') {
                return true;
              }
              return false;
            });
        
            if (menuLoading) {
              menuItem.items.splice(0, 0, dashboardMenu);
              setMenuItems({ items: [...menuItem.items] });
            } else if (!menuLoading && dashboardMenu?.id !== undefined && !isFound) {
              menuItem.items.splice(0, 1, dashboardMenu);
              setMenuItems({ items: [...menuItem.items] });
            } else {
              setMenuItems({ items: [...menuItem.items] });
            }
            // eslint-disable-next-line
  }, [menuLoading]);
}
```

{% endcode %}

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

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

```typescript
// project-imports
import { fetcher } from 'utils/axios';

import { NavItemType } from 'types/menu';
	
export const endpoints = {
  ...
  dashboard: '/dashboard' // server URL
};

const staticMenuItem = {
  id: 'invoice1',
  title: 'invoice',
  type: 'item',
  url: '/dashboard/invoice',
  breadcrumbs: false
};
	
export function useGetMenu() {
  const { data, isLoading, error, isValidating } = useSWR(endpoints.key + endpoints.dashboard, fetcher, {
    revalidateIfStale: false,
    revalidateOnFocus: false,
    revalidateOnReconnect: false
  });

  const memoizedValue = useMemo(() => {
    let updatedMenu = data?.dashboard;

    if (updatedMenu && Array.isArray(updatedMenu.children) && updatedMenu.children.length > 0) {
      updatedMenu = {
        ...updatedMenu,
        children: updatedMenu.children.map((group: NavItemType) => {
          if (Array.isArray(group.children)) {
            return {
              ...group,
              children: [...group.children, staticMenuItem]
            };
          }
          return group;
        })
      };
    }

    return {
      menu: updatedMenu as NavItemType,
      menuLoading: isLoading,
      menuError: error,
      menuValidating: isValidating,
      menuEmpty: !isLoading && !data?.length
    };
  }, [data, error, isLoading, isValidating]);

  return memoizedValue;
}
```

{% endcode %}

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

**Form:**

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

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

{% endcode %}

**To:**

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

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

{% endcode %}
{% endtab %}

{% tab title="NEXT(JS)" %}
In the Mantis React admin, a few **dashboard menus (i.e. Default, Analytics, Components)** 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 menu-items file: `dashboard.jsx`
   1. `dashboard.tsx`\[`src/menu-items/dashboard.jsx`]
2. **Open the file** `src/layout/Dashboard/Drawer/DrawerContent/Navigation/index.jsx` **and edit the below line of code.**&#x20;

**Form:**&#x20;

{% code title="src/layout/DashboardLayout/Drawer/DrawerContent/Navigation/index.jsx" %}

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

{% endcode %}

**To:**&#x20;

{% code title="src/layout/Dashboard/Drawer/DrawerContent/Navigation/index.jsx" %}

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

{% endcode %}

3. **Open file** `src/layout/Dashboard/Drawer/DrawerContent/Navigation/index.jsx` **and remove the below line of code.**

{% code title="src/layout/DashboardLayout/Drawer/DrawerContent/Navigation/index.jsx" %}

```javascript
import { MenuFromAPI } from 'menu-items/dashboard';
	
export default function Navigation() {
	...		
	const { menuLoading } = useGetMenu();		
	...		
        const [menuItems, setMenuItems] = useState({ items: [] });

	let dashboardMenu = MenuFromAPI();
	
        useLayoutEffect(() => {
            const isFound = menuItem.items.some((element) => {
              if (element.id === 'group-dashboard') {
                return true;
              }
              return false;
            });
        
            if (menuLoading) {
              menuItem.items.splice(0, 0, dashboardMenu);
              setMenuItems({ items: [...menuItem.items] });
            } else if (!menuLoading && dashboardMenu?.id !== undefined && !isFound) {
              menuItem.items.splice(0, 1, dashboardMenu);
              setMenuItems({ items: [...menuItem.items] });
            } else {
              setMenuItems({ items: [...menuItem.items] });
            }
            // eslint-disable-next-line
  }, [menuLoading]);
}
```

{% endcode %}

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

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

```typescript
// project-imports
import { fetcher } from 'utils/axios';
	
export const endpoints = {
  ...
  dashboard: '/dashboard' // server URL
};

const staticMenuItem = {
  id: 'invoice1',
  title: 'invoice',
  type: 'item',
  url: '/dashboard/invoice',
  breadcrumbs: false
};
	
export function useGetMenu() {
  const { data, isLoading, error, isValidating } = useSWR(endpoints.key + endpoints.dashboard, fetcher, {
    revalidateIfStale: false,
    revalidateOnFocus: false,
    revalidateOnReconnect: false
  });

  const memoizedValue = useMemo(() => {
    let updatedMenu = data?.dashboard;

    if (updatedMenu && Array.isArray(updatedMenu.children) && updatedMenu.children.length > 0) {
      updatedMenu = {
        ...updatedMenu,
        children: updatedMenu.children.map((group: NavItemType) => {
          if (Array.isArray(group.children)) {
            return {
              ...group,
              children: [...group.children, staticMenuItem]
            };
          }
          return group;
        })
      };
    }

    return {
      menu: updatedMenu,
      menuLoading: isLoading,
      menuError: error,
      menuValidating: isValidating,
      menuEmpty: !isLoading && !data?.length
    };
  }, [data, error, isLoading, isValidating]);

  return memoizedValue;
}
```

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