Uncaught Invariant Violation: Item not found in navigation

[bambier]

Steps to reproduce

RouteManager.jsx

import { ThemeContext } from "@emotion/react";
import CircularProgress from "@mui/material/CircularProgress";
import { UserContext } from "context/UserContext";
import Offline from "pages/public/Offline";
import { lazy, Suspense, useContext } from "react";
import { Route, Routes } from "react-router-dom";
import { ToastContainer } from "react-toastify";


const Private = lazy(() => import("./Private"));
const Public = lazy(() => import("./Public"));


export default function RouteManager() {
	const userCntx = useContext(UserContext);
	const themeContext = useContext(ThemeContext);

	return (
		<>
			<Suspense fallback={<CircularProgress sx={{ mx: "auto", my: "50%" }} />}>
				<Routes>
					{
						userCntx.isAuthenticated ? <Route path="/dashboard/*" element={<Private />} /> : null
					}
					<Route path="/offline/" element={<Offline />} />
					<Route index path="/*" element={<Public />} />

				</Routes >
				<ToastContainer
					autoClose={5000}
					rtl={true}
					pauseOnFocusLoss
					draggable
					pauseOnHover
					theme={themeContext.isDarkMode ? "dark" : "light"}
				/>
			</Suspense>
		</>
	);
}

Private.jsx

import { Alert, Box, CircularProgress, useTheme } from '@mui/material';
import { PageContainer } from '@toolpad/core';
import { DashboardLayout } from '@toolpad/core/DashboardLayout';
import { ReactRouterAppProvider } from "@toolpad/core/react-router";
import urls from 'api/urls';
import logo from "assets/images/logo.png";
import useGetObj from "hooks/useGetObj";
import { lazy, useEffect, useState } from "react";
import { Route, Routes } from 'react-router-dom';
import get_pages from "utils/get_pages";

const Dashboard = lazy(() => import("pages/private/dashboard/MainDashboard"));
const Profile = lazy(() => import("pages/private/profile/Profile"));
const AddArticle = lazy(() => import("pages/private/Articles/AddArticle"));
const ArticleList = lazy(() => import("pages/private/Articles/ArticleList"));
const Users = lazy(() => import("pages/private/users/Users"));


const branding = {
	homeUrl: "/",
	logo: <img src={logo} alt="Logo" />,
	title: "Website"
};

export default function Private() {
	const theme = useTheme();
	const [navigation, setNavigation] = useState([]);
	const [user, isLoaded, error] = useGetObj({ url: `${urls.account}profile/` });

	useEffect(() => {

		if (isLoaded && !error && user) {
			const pages = get_pages(user);
			setNavigation(pages);
		}
	}, [user, isLoaded, error]);


	if (!isLoaded) {
		return <Box sx={{ mt: 20, textAlign: 'center' }}><CircularProgress /></Box>;
	} else if ((isLoaded && user === null) || error) {
		return (
			<Box sx={{ mt: 20, textAlign: 'center', p: 5 }}>
				<Alert severity='error'>
  Error
				</Alert>
			</Box>
		);
	}
	else if (isLoaded && !user.is_active) {
		return (
			<Box sx={{ mt: 20, textAlign: 'center', p: 5 }}>
				<CircularProgress />
			</Box>
		);
	} else {
		return (
			<ReactRouterAppProvider theme={theme} branding={branding} navigation={navigation} session={user} >
				<DashboardLayout>
					<PageContainer>
						<Routes>
							<Route path="/" exact index element={<Dashboard />} />
							<Route path='profile/' element={<Profile />} />

							{
								user.is_superuser ?
									<>
										<Route path='article/' element={<AddArticle />} />
										<Route path='article/add/' element={<AddArticle />} />
										<Route path='article/list/' element={<ArticleList />} />
										<Route path='users/' element={<Users />} />
									</> : null
							}

						</Routes>
					</PageContainer>
				</DashboardLayout>
			</ReactRouterAppProvider>
		);
	}
}

getPages.js

import CreateRoundedIcon from '@mui/icons-material/CreateRounded';
import DashboardIcon from '@mui/icons-material/Dashboard';
import NewspaperRoundedIcon from '@mui/icons-material/NewspaperRounded';
import PersonRoundedIcon from '@mui/icons-material/PersonRounded';
import SegmentRoundedIcon from '@mui/icons-material/SegmentRounded';


const Base_NAVIGATION = [
    {
        kind: 'header',
        title: 'User Dashboard',
    },
    {
        segment: 'dashboard',
        pattern: 'dashboard(/)?',
        title: 'Dashboard',
        icon: <DashboardIcon />,
    },
    {
        segment: 'dashboard/profile',
        pattern: 'dashboard/profile(/)?',
        title: 'Profile',
        icon: <PersonRoundedIcon />,
    },
];

export default function get_pages(user) {
    const pages = Base_NAVIGATION;
    if (user.is_superuser) {
        pages.push(
            {
                kind: 'header',
                title: 'Auther Dashboard',
            },
            {
                segment: 'dashboard/article',
                pattern: 'dashboard/article(/)?',
                title: 'Articles',
                icon: <NewspaperRoundedIcon />,
                children: [
                    {
                        segment: 'add',
                        pattern: 'dashboard/article/add(/)?', // Add full pattern
                        title: 'Add',
                        icon: <CreateRoundedIcon />
                    },
                    {
                        segment: 'list',
                        pattern: 'dashboard/article/list(/)?', // Add full pattern
                        title: 'List',
                        icon: <SegmentRoundedIcon />
                    },
                ]
            },

        );

        return pages;
    }




    return pages;
}

Note: Just use dummy component for Route elements. It doesn't matter because they are empty screens like

function Untitled() {
    return (
        <div>Untitled</div>
    )
}

export default Untitled;

Current behavior

Page doesn't shows up and says

Item not found in navigation: Add
invariant@http://localhost:3000/static/js/vendors-node_modules_mui_icons-material_esm_CreateRounded_js-node_modules_mui_icons-material_-797098.chunk.js:7730:15
getItemPath@http://localhost:3000/static/js/vendors-node_modules_mui_icons-material_esm_CreateRounded_js-node_modules_mui_icons-material_-797098.chunk.js:7028:41
./node_modules/@toolpad/core/esm/shared/navigation.js/hasSelectedNavigationChildren/<@http://localhost:3000/static/js/vendors-node_modules_mui_icons-material_esm_CreateRounded_js-node_modules_mui_icons-material_-797098.chunk.js:7044:33
hasSelectedNavigationChildren@http://localhost:3000/static/js/vendors-node_modules_mui_icons-material_esm_CreateRounded_js-node_modules_mui_icons-material_-797098.chunk.js:7037:26
./node_modules/@toolpad/core/esm/DashboardLayout/DashboardSidebarSubNavigation.js/DashboardSidebarSubNavigation/initialExpandedItemIds</<@http://localhost:3000/static/js/vendors-node_modules_mui_icons-material_esm_CreateRounded_js-node_modules_mui_icons-material_-797098.chunk.js:5732:194
./node_modules/@toolpad/core/esm/DashboardLayout/DashboardSidebarSubNavigation.js/DashboardSidebarSubNavigation/initialExpandedItemIds<@http://localhost:3000/static/js/vendors-node_modules_mui_icons-material_esm_CreateRounded_js-node_modules_mui_icons-material_-797098.chunk.js:5730:7
mountMemo@http://localhost:3000/static/js/bundle.js:46922:21
useMemo@http://localhost:3000/static/js/bundle.js:55131:16
./node_modules/react/cjs/react.development.js/exports.useMemo@http://localhost:3000/static/js/bundle.js:70415:32
DashboardSidebarSubNavigation@http://localhost:3000/static/js/vendors-node_modules_mui_icons-material_esm_CreateRounded_js-node_modules_mui_icons-material_-797098.chunk.js:5727:69
react_stack_bottom_frame@http://localhost:3000/static/js/bundle.js:56014:18
renderWithHooks@http://localhost:3000/static/js/bundle.js:46224:38
updateFunctionComponent@http://localhost:3000/static/js/bundle.js:47917:17
beginWork@http://localhost:3000/static/js/bundle.js:48503:16
runWithFiberInDEV@http://localhost:3000/static/js/bundle.js:43995:125
performUnitOfWork@http://localhost:3000/static/js/bundle.js:50576:93
workLoopSync@http://localhost:3000/static/js/bundle.js:50469:55
renderRootSync@http://localhost:3000/static/js/bundle.js:50453:7
performWorkOnRoot@http://localhost:3000/static/js/bundle.js:50217:42
performSyncWorkOnRoot@http://localhost:3000/static/js/bundle.js:51181:22
flushSyncWorkAcrossRoots_impl@http://localhost:3000/static/js/bundle.js:51100:306
flushSpawnedWork@http://localhost:3000/static/js/bundle.js:50878:36
commitRoot@http://localhost:3000/static/js/bundle.js:50722:7
commitRootWhenReady@http://localhost:3000/static/js/bundle.js:50287:15

Also console log is

Uncaught Invariant Violation: Item not found in navigation: Add
    invariant http://localhost:3000/static/js/vendors-node_modules_mui_icons-material_esm_CreateRounded_js-node_modules_mui_icons-material_-797098.chunk.js:7730
    getItemPath http://localhost:3000/static/js/vendors-node_modules_mui_icons-material_esm_CreateRounded_js-node_modules_mui_icons-material_-797098.chunk.js:7028
    node_modules toolpad/core/esm/shared/navigation.js/hasSelectedNavigationChildren/<@http://localhost:3000/static/js/vendors-node_modules_mui_icons-material_esm_CreateRounded_js-node_modules_mui_icons-material_-797098.chunk.js:7044
    hasSelectedNavigationChildren http://localhost:3000/static/js/vendors-node_modules_mui_icons-material_esm_CreateRounded_js-node_modules_mui_icons-material_-797098.chunk.js:7037
    node_modules toolpad/core/esm/DashboardLayout/DashboardSidebarSubNavigation.js/DashboardSidebarSubNavigation/initialExpandedItemIds</<@http://localhost:3000/static/js/vendors-node_modules_mui_icons-material_esm_CreateRounded_js-node_modules_mui_icons-material_-797098.chunk.js:5732
    node_modules toolpad/core/esm/DashboardLayout/DashboardSidebarSubNavigation.js/DashboardSidebarSubNavigation/initialExpandedItemIds<@http://localhost:3000/static/js/vendors-node_modules_mui_icons-material_esm_CreateRounded_js-node_modules_mui_icons-material_-797098.chunk.js:5730
    mountMemo http://localhost:3000/static/js/bundle.js:46922
    useMemo http://localhost:3000/static/js/bundle.js:55131
    useMemo http://localhost:3000/static/js/bundle.js:70415
    DashboardSidebarSubNavigation http://localhost:3000/static/js/vendors-node_modules_mui_icons-material_esm_CreateRounded_js-node_modules_mui_icons-material_-797098.chunk.js:5727
    react_stack_bottom_frame http://localhost:3000/static/js/bundle.js:56014
    renderWithHooks http://localhost:3000/static/js/bundle.js:46224
    updateFunctionComponent http://localhost:3000/static/js/bundle.js:47917
    beginWork http://localhost:3000/static/js/bundle.js:48503
    runWithFiberInDEV http://localhost:3000/static/js/bundle.js:43995
    performUnitOfWork http://localhost:3000/static/js/bundle.js:50576
    workLoopSync http://localhost:3000/static/js/bundle.js:50469
    renderRootSync http://localhost:3000/static/js/bundle.js:50453
    performWorkOnRoot http://localhost:3000/static/js/bundle.js:50217
    performSyncWorkOnRoot http://localhost:3000/static/js/bundle.js:51181
    flushSyncWorkAcrossRoots_impl http://localhost:3000/static/js/bundle.js:51100
    flushSpawnedWork http://localhost:3000/static/js/bundle.js:50878
    commitRoot http://localhost:3000/static/js/bundle.js:50722
    commitRootWhenReady http://localhost:3000/static/js/bundle.js:50287
    setTimeout handler*performWorkOnRoot http://localhost:3000/static/js/bundle.js:50264
    performWorkOnRootViaSchedulerTask http://localhost:3000/static/js/bundle.js:51173
    performWorkUntilDeadline http://localhost:3000/static/js/bundle.js:70529
    js http://localhost:3000/static/js/bundle.js:70648
    js http://localhost:3000/static/js/bundle.js:70755
    factory http://localhost:3000/static/js/bundle.js:77884
    __webpack_require__ http://localhost:3000/static/js/bundle.js:77239
    fn http://localhost:3000/static/js/bundle.js:77500
    hotRequire http://localhost:3000/static/js/bundle.js:77867
    js http://localhost:3000/static/js/bundle.js:70770
    factory http://localhost:3000/static/js/bundle.js:77884
    __webpack_require__ http://localhost:3000/static/js/bundle.js:77239
    fn http://localhost:3000/static/js/bundle.js:77500
    hotRequire http://localhost:3000/static/js/bundle.js:77867
    js http://localhost:3000/static/js/bundle.js:53775
    js http://localhost:3000/static/js/bundle.js:56776
    factory http://localhost:3000/static/js/bundle.js:77884
    __webpack_require__ http://localhost:3000/static/js/bundle.js:77239
    fn http://localhost:3000/static/js/bundle.js:77500
    hotRequire http://localhost:3000/static/js/bundle.js:77867
    js http://localhost:3000/static/js/bundle.js:57000
    factory http://localhost:3000/static/js/bundle.js:77884
    __webpack_require__ http://localhost:3000/static/js/bundle.js:77239
    fn http://localhost:3000/static/js/bundle.js:77500
    hotRequire http://localhost:3000/static/js/bundle.js:77867
    js http://localhost:3000/static/js/bundle.js:76668
    factory http://localhost:3000/static/js/bundle.js:77884
    __webpack_require__ http://localhost:3000/static/js/bundle.js:77239
    <anonymous> http://localhost:3000/static/js/bundle.js:78488
    <anonymous> http://localhost:3000/static/js/bundle.js:78490
[vendors-node_modules_mui_icons-material_esm_CreateRounded_js-node_modules_mui_icons-material_-797098.chunk.js:7730:15](http://localhost:3000/static/js/vendors-node_modules_mui_icons-material_esm_CreateRounded_js-node_modules_mui_icons-material_-797098.chunk.js)
An error occurred in the <DashboardSidebarSubNavigation> component.

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://react.dev/link/error-boundaries to learn more about error boundaries.

Expected behavior

Show pages under /dashboard/ path instead of root or anything else without any error.

Context

I have 2 routes.

1. Public
2. Private

Public URLs are under root (/) and private URL which needs authentication and are under dashboard (/dashboard).

get_pages is responsible for getting dashboard pages according user accesses and permissions.
RouteManager is responsible for checking for users authentication and let them to access private pages

I tried many approaches to put side navigation's in dashboard under /dashboard/ in this scenario but either they went under root url (when I change url/pattern in get_pages) or just not shows up when I put location prop to Routes in Private.jsx.

Your environment

Firefox

npx @mui/envinfo

  System:
    OS: Linux 6.14 Ubuntu 24.04.3 LTS 24.04.3 LTS (Noble Numbat)
  Binaries:
    Node: 22.13.0 - ~/.nvm/versions/node/v22.13.0/bin/node
    npm: 10.9.2 - ~/.nvm/versions/node/v22.13.0/bin/npm
    pnpm: Not Found
  Browsers:
    Chrome: Not Found
  npmPackages:
    @emotion/react: ^11.14.0 => 11.14.0 
    @emotion/styled: ^11.14.1 => 11.14.1 
    @mui/core-downloads-tracker:  7.3.1 
    @mui/icons-material: 7.3.1 => 7.3.1 
    @mui/material: 7.3.1 => 7.3.1 
    @mui/private-theming:  7.3.1 
    @mui/styled-engine:  7.3.1 
    @mui/styled-engine-sc: 7.3.1 => 7.3.1 
    @mui/system:  7.3.1 
    @mui/types:  7.4.5 
    @mui/utils:  7.3.1 
    @mui/x-data-grid:  8.10.1 
    @mui/x-date-pickers: ^8.10.0 => 8.10.0 
    @mui/x-internals:  8.10.0 
    @mui/x-virtualizer:  0.1.2 
    @toolpad/core: ^0.16.0 => 0.16.0 
    @toolpad/utils:  0.16.0 
    react: ^19.1.1 => 19.1.1 
    react-dom: ^19.1.1 => 19.1.1 
    styled-components: ^6.1.19 => 6.1.19 
    typescript: ^5.9.2 => 5.9.2 

Search keywords: navigation, react

[George-Madeley]

I have a similar issue. I have two routes /group_a and /group_b which both use <DashboardLayout> components with their own navigation whilst contains only the items found within the /group_a and /group_b routes respectfully. The <NextAppProvider> component gets a navigation list which contains both /group_a and /group_b . When you initially navigate into either /group_a or /group_b, I get the same error as OP but if I referch the page, the error goes away. I've debugged the getItemPath function and the item exists within the map so I don't know why it cannot find its corresponding value

[George-Madeley]

I have a patch for my issue and it might also work for you. Looking into the code, the <DashboardLayout> will use the given navigation prop and fallback to the navigation context the <AppProvider> provides if the navigation prop is undefined. However, none of the children components of <DashboardLayout> do this such as <DashboardSidebarPageItem>; they will just use the context.

As a result, when the getItemPath function is called with the navigation object (the one from the context) and your item (the one from the prop), JavaScript cannot find the item object reference in the map despite their being an object with the exact same structure in the map.

To resolve this, my path adds another navigation context provider component to the root of the <DashboardLayout> component. This provider will provide either the navigation prop value or the navigation context value if undefined. As a result, all children items will use the same navigation object and you will no longer get an invariant errors.

It should be noted that all children components that rely on the navigation context will now be relative to the <DashboardLayout>, i.e., <PageContainer>'s breadcrumbs will be relative to the navigation prop value if you placed it inside a <DashboardLayout>. You may also need to amend your segments of the navigation object you pass into the navigation prop to ensure correct routing.

This is still a quick and temporary fix so if anyone has any better ideas to solve this issue, I would love to hear them!

diff --git a/DashboardLayout/DashboardLayout.js b/DashboardLayout/DashboardLayout.js
index 9e8f7c2a924158bcaf678695a8f4d9fff5f62b77..b70b35d4c12794f640e4d6f3f26421fd474df040 100644
--- a/DashboardLayout/DashboardLayout.js
+++ b/DashboardLayout/DashboardLayout.js
@@ -171,79 +171,95 @@ function DashboardLayout(props) {
       }
     };
   }, [isNavigationExpanded, sidebarExpandedWidth]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
-    sx: {
-      position: 'relative',
-      display: 'flex',
-      overflow: 'hidden',
-      height: '100vh',
-      width: '100vw',
-      ...sx
-    },
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(HeaderSlot, {
-      ...headerSlotProps
-    }), !hideNavigation ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Drawer.default, {
-        container: appWindowContext?.document.body,
-        variant: "temporary",
-        open: isMobileNavigationExpanded,
-        onClose: handleSetNavigationExpanded(false),
-        ModalProps: {
-          keepMounted: true // Better open performance on mobile.
-        },
-        sx: {
-          display: {
-            xs: 'block',
-            sm: disableCollapsibleSidebar ? 'block' : 'none',
-            md: 'none'
-          },
-          ...getDrawerSharedSx(false, true)
-        },
-        children: getDrawerContent(false, 'phone')
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Drawer.default, {
-        variant: "permanent",
-        sx: {
-          display: {
-            xs: 'none',
-            sm: disableCollapsibleSidebar ? 'none' : 'block',
-            md: 'none'
-          },
-          ...getDrawerSharedSx(isMobileMini, false)
-        },
-        children: getDrawerContent(isMobileMini, 'tablet')
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Drawer.default, {
-        variant: "permanent",
-        sx: {
-          display: {
-            xs: 'none',
-            md: 'block'
-          },
-          ...getDrawerSharedSx(isDesktopMini, false)
-        },
-        children: getDrawerContent(isDesktopMini, 'desktop')
-      })]
-    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+  return (0, _jsxRuntime.jsx)(_context.NavigationContext.Provider, {
+    value: navigation,
+    children: (0, _jsxRuntime.jsxs)(_Box.default, {
       sx: {
-        display: 'flex',
-        flexDirection: 'column',
-        flex: 1,
-        minWidth: 0
+        position: "relative",
+        display: "flex",
+        overflow: "hidden",
+        height: "100vh",
+        width: "100vw",
+        ...sx,
       },
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Toolbar2.default, {
-        sx: {
-          displayPrint: 'none'
-        }
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
-        component: "main",
-        sx: {
-          display: 'flex',
-          flexDirection: 'column',
-          flex: 1,
-          overflow: 'auto'
-        },
-        children: children
-      })]
-    })]
+      children: [
+        /*#__PURE__*/ (0, _jsxRuntime.jsx)(HeaderSlot, {
+          ...headerSlotProps,
+        }),
+        !hideNavigation
+          ? /*#__PURE__*/ (0, _jsxRuntime.jsxs)(React.Fragment, {
+              children: [
+                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_Drawer.default, {
+                  container: appWindowContext?.document.body,
+                  variant: "temporary",
+                  open: isMobileNavigationExpanded,
+                  onClose: handleSetNavigationExpanded(false),
+                  ModalProps: {
+                    keepMounted: true, // Better open performance on mobile.
+                  },
+                  sx: {
+                    display: {
+                      xs: "block",
+                      sm: disableCollapsibleSidebar ? "block" : "none",
+                      md: "none",
+                    },
+                    ...getDrawerSharedSx(false, true),
+                  },
+                  children: getDrawerContent(false, "phone"),
+                }),
+                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_Drawer.default, {
+                  variant: "permanent",
+                  sx: {
+                    display: {
+                      xs: "none",
+                      sm: disableCollapsibleSidebar ? "none" : "block",
+                      md: "none",
+                    },
+                    ...getDrawerSharedSx(isMobileMini, false),
+                  },
+                  children: getDrawerContent(isMobileMini, "tablet"),
+                }),
+                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_Drawer.default, {
+                  variant: "permanent",
+                  sx: {
+                    display: {
+                      xs: "none",
+                      md: "block",
+                    },
+                    ...getDrawerSharedSx(isDesktopMini, false),
+                  },
+                  children: getDrawerContent(isDesktopMini, "desktop"),
+                }),
+              ],
+            })
+          : null,
+        /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_Box.default, {
+          sx: {
+            display: "flex",
+            flexDirection: "column",
+            flex: 1,
+            minWidth: 0,
+          },
+          children: [
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_Toolbar2.default, {
+              sx: {
+                displayPrint: "none",
+              },
+            }),
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_Box.default, {
+              component: "main",
+              sx: {
+                display: "flex",
+                flexDirection: "column",
+                flex: 1,
+                overflow: "auto",
+              },
+              children: children,
+            }),
+          ],
+        }),
+      ],
+    }),
   });
 }
 process.env.NODE_ENV !== "production" ? DashboardLayout.propTypes /* remove-proptypes */ = {
diff --git a/esm/DashboardLayout/DashboardLayout.js b/esm/DashboardLayout/DashboardLayout.js
index 0f033253f4fda3e2b9449a5cb05e8e1f609119b7..ea45bcffab30cfd4daa93ac36705185bd8cf1d15 100644
--- a/esm/DashboardLayout/DashboardLayout.js
+++ b/esm/DashboardLayout/DashboardLayout.js
@@ -166,79 +166,95 @@ function DashboardLayout(props) {
       }
     };
   }, [isNavigationExpanded, sidebarExpandedWidth]);
-  return /*#__PURE__*/_jsxs(Box, {
-    sx: {
-      position: 'relative',
-      display: 'flex',
-      overflow: 'hidden',
-      height: '100vh',
-      width: '100vw',
-      ...sx
-    },
-    children: [/*#__PURE__*/_jsx(HeaderSlot, {
-      ...headerSlotProps
-    }), !hideNavigation ? /*#__PURE__*/_jsxs(React.Fragment, {
-      children: [/*#__PURE__*/_jsx(Drawer, {
-        container: appWindowContext?.document.body,
-        variant: "temporary",
-        open: isMobileNavigationExpanded,
-        onClose: handleSetNavigationExpanded(false),
-        ModalProps: {
-          keepMounted: true // Better open performance on mobile.
-        },
-        sx: {
-          display: {
-            xs: 'block',
-            sm: disableCollapsibleSidebar ? 'block' : 'none',
-            md: 'none'
-          },
-          ...getDrawerSharedSx(false, true)
-        },
-        children: getDrawerContent(false, 'phone')
-      }), /*#__PURE__*/_jsx(Drawer, {
-        variant: "permanent",
-        sx: {
-          display: {
-            xs: 'none',
-            sm: disableCollapsibleSidebar ? 'none' : 'block',
-            md: 'none'
-          },
-          ...getDrawerSharedSx(isMobileMini, false)
-        },
-        children: getDrawerContent(isMobileMini, 'tablet')
-      }), /*#__PURE__*/_jsx(Drawer, {
-        variant: "permanent",
-        sx: {
-          display: {
-            xs: 'none',
-            md: 'block'
-          },
-          ...getDrawerSharedSx(isDesktopMini, false)
-        },
-        children: getDrawerContent(isDesktopMini, 'desktop')
-      })]
-    }) : null, /*#__PURE__*/_jsxs(Box, {
+  return _jsx(NavigationContext.Provider, {
+    value: navigation,
+    children: _jsxs(Box, {
       sx: {
-        display: 'flex',
-        flexDirection: 'column',
-        flex: 1,
-        minWidth: 0
+        position: "relative",
+        display: "flex",
+        overflow: "hidden",
+        height: "100vh",
+        width: "100vw",
+        ...sx,
       },
-      children: [/*#__PURE__*/_jsx(Toolbar, {
-        sx: {
-          displayPrint: 'none'
-        }
-      }), /*#__PURE__*/_jsx(Box, {
-        component: "main",
-        sx: {
-          display: 'flex',
-          flexDirection: 'column',
-          flex: 1,
-          overflow: 'auto'
-        },
-        children: children
-      })]
-    })]
+      children: [
+        /*#__PURE__*/ _jsx(HeaderSlot, {
+          ...headerSlotProps,
+        }),
+        !hideNavigation
+          ? /*#__PURE__*/ _jsxs(React.Fragment, {
+              children: [
+                /*#__PURE__*/ _jsx(Drawer, {
+                  container: appWindowContext?.document.body,
+                  variant: "temporary",
+                  open: isMobileNavigationExpanded,
+                  onClose: handleSetNavigationExpanded(false),
+                  ModalProps: {
+                    keepMounted: true, // Better open performance on mobile.
+                  },
+                  sx: {
+                    display: {
+                      xs: "block",
+                      sm: disableCollapsibleSidebar ? "block" : "none",
+                      md: "none",
+                    },
+                    ...getDrawerSharedSx(false, true),
+                  },
+                  children: getDrawerContent(false, "phone"),
+                }),
+                /*#__PURE__*/ _jsx(Drawer, {
+                  variant: "permanent",
+                  sx: {
+                    display: {
+                      xs: "none",
+                      sm: disableCollapsibleSidebar ? "none" : "block",
+                      md: "none",
+                    },
+                    ...getDrawerSharedSx(isMobileMini, false),
+                  },
+                  children: getDrawerContent(isMobileMini, "tablet"),
+                }),
+                /*#__PURE__*/ _jsx(Drawer, {
+                  variant: "permanent",
+                  sx: {
+                    display: {
+                      xs: "none",
+                      md: "block",
+                    },
+                    ...getDrawerSharedSx(isDesktopMini, false),
+                  },
+                  children: getDrawerContent(isDesktopMini, "desktop"),
+                }),
+              ],
+            })
+          : null,
+        /*#__PURE__*/ _jsxs(Box, {
+          sx: {
+            display: "flex",
+            flexDirection: "column",
+            flex: 1,
+            minWidth: 0,
+          },
+          children: [
+            /*#__PURE__*/ _jsx(Toolbar, {
+              sx: {
+                displayPrint: "none",
+              },
+            }),
+            /*#__PURE__*/ _jsx(Box, {
+              component: "main",
+              sx: {
+                display: "flex",
+                flexDirection: "column",
+                flex: 1,
+                overflow: "auto",
+              },
+              children: children,
+            }),
+          ],
+        }),
+      ],
+    }),
   });
 }
 process.env.NODE_ENV !== "production" ? DashboardLayout.propTypes /* remove-proptypes */ = {