Able Pro
React
React
  • ✨Overview
  • 🌱Pre-requisites
  • 🚀Quick Start
  • 📂Folder Structure
  • 🌀State Management
  • 🔒Authentication
    • Switch to Auth0
    • Switch to Firebase
    • Switch to AWS Cognito
  • 🛣️Routing
  • 📡Axios API Calls
  • 🌐Internationalization
  • 🎭Theme/Style Configuration
  • 🎨Color Presets
  • 🛠️Project Configuration
  • 📚How to's
    • Login as First Page
    • Dashboard as First Page
    • Render Menu from the backend
    • Remove menu render from Backend
    • Remove Auth
  • 🤝Integration
    • Seed
    • Comparison
  • 📦Dependencies
  • 🖌️Figma
  • 🆘Support
  • 🗓️Roadmap
  • 📅Changelog
Powered by GitBook
On this page
  1. How to's

Remove menu render from Backend

PreviousRender Menu from the backendNextRemove Auth

Last updated 1 month ago

In the Able Pro React admin, a few dashboard menus (i.e. Default, Analytics, Components) load from our mock API (). 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 [src/menu-items/dashboard.tsx]

  2. Open the file src/layout/Dashboard/Drawer/DrawerContent/Navigation/index.jsx and edit the code below.

From:

src/layout/Dashboard/Drawer/DrawerContent/Navigation/index.jsx
import { Fragment, useLayoutEffect, useState } from 'react';
...
import menuItem from 'menu-items';
import { useGetMenu, useGetMenuMaster } from 'api/menu';

To:

src/layout/Dashboard/Drawer/DrawerContent/Navigation/index.tsx
import { Fragment, useState } from 'react';
...
import menuItems from 'menu-items';
import { useGetMenuMaster } from 'api/menu';

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

src/layout/Dashboard/Drawer/DrawerContent/Navigation/index.tsx
import { MenuFromAPI } from 'menu-items/dashboard';

function isFound(arr: any, str: string) {
  return arr.items.some((element: any) => {
	if (element.id === str) {
	  return true;
	}
	return false;
  });
}
	
export default function Navigation() {
	...		
	const { menuLoading } = useGetMenu();		
	...		
	const [menuItems, setMenuItems] = useState<{ items: NavItemType[] }>({ items: [] });

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

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

src\api\menu.ts
// project-imports
import { fetcher } from 'utils/axios';
	
export const endpoints = {
  ...
  dashboard: '/dashboard' // server URL
};
	
export function useGetMenu() {
  const { data, isLoading, error, isValidating } = useSWR(endpoints.key + endpoints.dashboard, fetcher, {
	revalidateIfStale: false,
	revalidateOnFocus: false,
	revalidateOnReconnect: false
  });

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

  return memoizedValue;
}

  1. Open file src\api\menu.ts and edit the below line of code. [ Only For Typescript Version]

Form:

src\api\menu.ts
import { MenuProps, NavItemType } from 'types/menu';

To:

src\api\menu.ts
import { MenuProps } from 'types/menu';

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

  2. Open the file src/layout/Dashboard/Drawer/DrawerContent/Navigation/index.jsx and edit the code below.

From:

src/layout/Dashboard/Drawer/DrawerContent/Navigation/index.jsx
import { Fragment, useLayoutEffect, useState } from 'react';
...
import menuItem from 'menu-items';
import { useGetMenu, useGetMenuMaster } from 'api/menu';

To:

src/layout/Dashboard/Drawer/DrawerContent/Navigation/index.jsx
import { Fragment, useState } from 'react';
...
import menuItems from 'menu-items';
import { useGetMenuMaster } from 'api/menu';

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

src/layout/Dashboard/Drawer/DrawerContent/Navigation/index.jsx
import { MenuFromAPI } from 'menu-items/dashboard';

function isFound(arr, str) {
  return arr.items.some((element) => {
	if (element.id === str) {
	  return true;
	}
	return false;
  });
}
	
export default function Navigation() {
	...		
	const { menuLoading } = useGetMenu();		
	...		
	const [menuItems, setMenuItems] = useState({ items: [] });

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

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

src\api\menu.js
// project-imports
import { fetcher } from 'utils/axios';
	
export const endpoints = {
  ...
  dashboard: '/dashboard' // server URL
};
	
export function useGetMenu() {
  const { data, isLoading, error, isValidating } = useSWR(endpoints.key + endpoints.dashboard, fetcher, {
	revalidateIfStale: false,
	revalidateOnFocus: false,
	revalidateOnReconnect: false
  });

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

  return memoizedValue;
}

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

  2. Open the file src/layout/DashboardLayout/Drawer/DrawerContent/Navigation/index.jsx and edit the code below.

From:

src/layout/DashboardLayout/Drawer/DrawerContent/Navigation/index.jsx
import { Fragment, useLayoutEffect, useState } from 'react';
...
import menuItem from 'menu-items';
import { useGetMenu, useGetMenuMaster } from 'api/menu';

To:

src/layout/DashboardLayout/Drawer/DrawerContent/Navigation/index.tsx
import { Fragment, useState } from 'react';
...
import menuItems from 'menu-items';
import { useGetMenuMaster } from 'api/menu';

  1. Open file src/layout/DashboardLayout/Drawer/DrawerContent/Navigation/index.tsx and remove the below line of code.

src/layout/DashboardLayout/Drawer/DrawerContent/Navigation/index.tsx
import { MenuFromAPI } from 'menu-items/dashboard';

function isFound(arr: any, str: string) {
  return arr.items.some((element: any) => {
	if (element.id === str) {
	  return true;
	}
	return false;
  });
}
	
export default function Navigation() {
	...		
	const { menuLoading } = useGetMenu();		
	...		
	const [menuItems, setMenuItems] = useState<{ items: NavItemType[] }>({ items: [] });

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

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

src\api\menu.ts
// project-imports
import { fetcher } from 'utils/axios';
	
export const endpoints = {
  ...
  dashboard: '/dashboard' // server URL
};
	
export function useGetMenu() {
  const { data, isLoading, error, isValidating } = useSWR(endpoints.key + endpoints.dashboard, fetcher, {
	revalidateIfStale: false,
	revalidateOnFocus: false,
	revalidateOnReconnect: false
  });

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

  return memoizedValue;
}

  1. Open file src\api\menu.ts and edit the below line of code. [ Only For Typescript Version]

Form:

src\api\menu.ts
import { MenuProps, NavItemType } from 'types/menu';

To:

src\api\menu.ts
import { MenuProps } from 'types/menu';

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

  2. Open the file src/layout/DashboardLayout/Drawer/DrawerContent/Navigation/index.jsx and edit the code below.

From:

src/layout/DashboardLayout/Drawer/DrawerContent/Navigation/index.jsx
import { Fragment, useLayoutEffect, useState } from 'react';
...
import menuItem from 'menu-items';
import { useGetMenu, useGetMenuMaster } from 'api/menu';

To:

src/layout/DashboardLayout/Drawer/DrawerContent/Navigation/index.jsx
import { Fragment, useState } from 'react';
...
import menuItems from 'menu-items';
import { useGetMenuMaster } from 'api/menu';

  1. Open file src/layout/DashboardLayout/Drawer/DrawerContent/Navigation/index.jsx and remove the below line of code.

src/layout/DashboardLayout/Drawer/DrawerContent/Navigation/index.jsx
import { MenuFromAPI } from 'menu-items/dashboard';

function isFound(arr, str) {
  return arr.items.some((element) => {
	if (element.id === str) {
	  return true;
	}
	return false;
  });
}
	
export default function Navigation() {
	...		
	const { menuLoading } = useGetMenu();		
	...		
	const [menuItems, setMenuItems] = useState({ items: [] });

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

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

src\api\menu.js
// project-imports
import { fetcher } from 'utils/axios';
	
export const endpoints = {
  ...
  dashboard: '/dashboard' // server URL
};
	
export function useGetMenu() {
  const { data, isLoading, error, isValidating } = useSWR(endpoints.key + endpoints.dashboard, fetcher, {
	revalidateIfStale: false,
	revalidateOnFocus: false,
	revalidateOnReconnect: false
  });

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

  return memoizedValue;
}

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

  2. Open the file src/layout/Dashboard/Drawer/DrawerContent/Navigation/index.jsx and edit the code below.

From:

src/layout/Dashboard/Drawer/DrawerContent/Navigation/index.jsx
import { Fragment, useLayoutEffect, useState } from 'react';
...
import menuItem from 'menu-items';
import { useGetMenu, useGetMenuMaster } from 'api/menu';

To:

src/layout/Dashboard/Drawer/DrawerContent/Navigation/index.tsx
import { Fragment, useState } from 'react';
...
import menuItems from 'menu-items';
import { useGetMenuMaster } from 'api/menu';

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

src/layout/Dashboard/Drawer/DrawerContent/Navigation/index.tsx
import { MenuFromAPI } from 'menu-items/dashboard';

function isFound(arr: any, str: string) {
  return arr.items.some((element: any) => {
	if (element.id === str) {
	  return true;
	}
	return false;
  });
}
	
export default function Navigation() {
	...		
	const { menuLoading } = useGetMenu();		
	...		
	const [menuItems, setMenuItems] = useState<{ items: NavItemType[] }>({ items: [] });

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

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

src\api\menu.ts
// project-imports
import { fetcher } from 'utils/axios';
	
export const endpoints = {
  ...
  dashboard: '/dashboard' // server URL
};
	
export function useGetMenu() {
  const { data, isLoading, error, isValidating } = useSWR(endpoints.key + endpoints.dashboard, fetcher, {
	revalidateIfStale: false,
	revalidateOnFocus: false,
	revalidateOnReconnect: false
  });

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

  return memoizedValue;
}

  1. Open file src\api\menu.ts and edit the below line of code. [ Only For Typescript Version]

Form:

src\api\menu.ts
import { MenuProps, NavItemType } from 'types/menu';

To:

src\api\menu.ts
import { MenuProps } from 'types/menu';

  1. Delete menu-items file dashboard.jsx [src/menu-items/dashboard.tsx]

  2. Open the file src/layout/Dashboard/Drawer/DrawerContent/Navigation/index.jsx and edit the code below.

From:

src/layout/Dashboard/Drawer/DrawerContent/Navigation/index.jsx
import { Fragment, useLayoutEffect, useState } from 'react';
...
import menuItem from 'menu-items';
import { useGetMenu, useGetMenuMaster } from 'api/menu';

To:

src/layout/Dashboard/Drawer/DrawerContent/Navigation/index.jsx
import { Fragment, useState } from 'react';
...
import menuItems from 'menu-items';
import { useGetMenuMaster } from 'api/menu';

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

src/layout/Dashboard/Drawer/DrawerContent/Navigation/index.jsx
import { MenuFromAPI } from 'menu-items/dashboard';

function isFound(arr, str) {
  return arr.items.some((element) => {
	if (element.id === str) {
	  return true;
	}
	return false;
  });
}
	
export default function Navigation() {
	...		
	const { menuLoading } = useGetMenu();		
	...		
	const [menuItems, setMenuItems] = useState({ items: [] });

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

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

src\api\menu.js
// project-imports
import { fetcher } from 'utils/axios';
	
export const endpoints = {
  ...
  dashboard: '/dashboard' // server URL
};
	
export function useGetMenu() {
  const { data, isLoading, error, isValidating } = useSWR(endpoints.key + endpoints.dashboard, fetcher, {
	revalidateIfStale: false,
	revalidateOnFocus: false,
	revalidateOnReconnect: false
  });

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

  return memoizedValue;
}

In the Able Pro React admin, a few dashboard menus (i.e. Default, Analytics, Components) load from our mock API (). If you want to remove it from your admin panel, follow the steps below and remove/edit the suggested line of code.

In the Able Pro React admin, a few dashboard menus (i.e. Default, Analytics, Components) load from our mock API (). If you want to remove it from your admin panel, follow the steps below and remove/edit the suggested line of code.

In the Able Pro React admin, a few dashboard menus (i.e. Default, Analytics, Components) load from our mock API (). If you want to remove it from your admin panel, follow the steps below and remove/edit the suggested line of code.

In the Able Pro React admin, a few dashboard menus (i.e. Default, Analytics, Components) load from our mock API (). If you want to remove it from your admin panel, follow the steps below and remove/edit the suggested line of code.

In the Able Pro React admin, a few dashboard menus (i.e. Default, Analytics, Components) load from our mock API (). If you want to remove it from your admin panel, follow the steps below and remove/edit the suggested line of code.

📚
GitHub repository
GitHub repository
GitHub repository
GitHub repository
GitHub repository
GitHub repository