@etsoo/toolpad 1.0.28 → 1.0.29

package/build/cjs/AppProvider/AppProvider.d.ts

@@ -27,7 +27,7 @@ export interface NavigationPageItem {
     pattern?: string;
     action?: React.ReactNode;
     children?: Navigation;
-    subs?: string[];
+    hidden?: boolean;
 }
 export interface NavigationSubheaderItem {
     kind: "header";

package/build/cjs/DashboardLayout/DashboardLayout.test.js

@@ -131,6 +131,12 @@ const AppProviderComponent_1 = require("../AppProvider/AppProviderComponent");
                         segment: "traffic",
                         title: "Traffic",
                         icon: (0, jsx_runtime_1.jsx)(Description_1.default, {})
+                    },
+                    {
+                        segment: "hidden",
+                        title: "Hidden",
+                        icon: (0, jsx_runtime_1.jsx)(Description_1.default, {}),
+                        hidden: true
                     }
                 ]
             }
@@ -146,6 +152,7 @@ const AppProviderComponent_1 = require("../AppProvider/AppProviderComponent");
         });
         (0, vitest_1.expect)((0, react_1.within)(desktopNavigation).getByText("Sales")).toBeTruthy();
         (0, vitest_1.expect)((0, react_1.within)(desktopNavigation).getByText("Traffic")).toBeTruthy();
+        (0, vitest_1.expect)((0, react_1.within)(desktopNavigation).queryByText("Hidden")).toBeNull();
     });
     (0, vitest_1.test)("shows correct selected page item", () => {
         const NAVIGATION = [
@@ -157,7 +164,14 @@ const AppProviderComponent_1 = require("../AppProvider/AppProviderComponent");
             {
                 title: "Orders",
                 segment: "orders",
-                icon: (0, jsx_runtime_1.jsx)(ShoppingCart_1.default, {})
+                icon: (0, jsx_runtime_1.jsx)(ShoppingCart_1.default, {}),
+                children: [
+                    {
+                        segment: "nested",
+                        title: "Nested",
+                        hidden: true
+                    }
+                ]
             },
             {
                 segment: "dynamic",
@@ -197,6 +211,8 @@ const AppProviderComponent_1 = require("../AppProvider/AppProviderComponent");
         rerender((0, jsx_runtime_1.jsx)(AppWithPathname, { pathname: "/orders" }));
         (0, vitest_1.expect)((0, react_1.within)(desktopNavigation).getByRole("link", { name: "Dashboard" })).not.toHaveClass("Mui-selected");
         (0, vitest_1.expect)((0, react_1.within)(desktopNavigation).getByRole("link", { name: "Orders" })).toHaveClass("Mui-selected");
+        rerender((0, jsx_runtime_1.jsx)(AppWithPathname, { pathname: "/orders/nested" }));
+        (0, vitest_1.expect)((0, react_1.within)(desktopNavigation).getByRole("link", { name: "Orders" })).toHaveClass("Mui-selected");
         rerender((0, jsx_runtime_1.jsx)(AppWithPathname, { pathname: "/dynamic" }));
         (0, vitest_1.expect)((0, react_1.within)(desktopNavigation).getByRole("link", { name: "Dynamic" })).not.toHaveClass("Mui-selected");
         rerender((0, jsx_runtime_1.jsx)(AppWithPathname, { pathname: "/dynamic/123" }));

package/build/cjs/DashboardLayout/DashboardSidebarSubNavigation.js

@@ -53,10 +53,10 @@ const Tooltip_1 = __importDefault(require("@mui/material/Tooltip"));
 const ExpandLess_1 = __importDefault(require("@mui/icons-material/ExpandLess"));
 const ExpandMore_1 = __importDefault(require("@mui/icons-material/ExpandMore"));
 const Link_1 = require("../shared/Link");
-const context_1 = require("../shared/context");
 const navigation_1 = require("../shared/navigation");
 const utils_1 = require("./utils");
 const styles_1 = require("@mui/material/styles");
+const useActivePage_1 = require("../useActivePage/useActivePage");
 const NavigationListItemButton = (0, styles_1.styled)(ListItemButton_1.default)(({ theme }) => ({
     borderRadius: 8,
     "&.Mui-selected": {
@@ -87,8 +87,8 @@ const NavigationListItemButton = (0, styles_1.styled)(ListItemButton_1.default)(
  * @ignore - internal component.
  */
 function DashboardSidebarSubNavigation({ subNavigation, basePath = "", depth = 0, onLinkClick, isMini = false, isFullyExpanded = true, hasDrawerTransitions = false, selectedItemId }) {
-    const routerContext = React.useContext(context_1.RouterContext);
-    const pathname = routerContext?.pathname ?? "/";
+    const activePage = (0, useActivePage_1.useActivePage)();
+    const pathname = activePage?.sourcePath ?? "/";
     const initialExpandedSidebarItemIds = React.useMemo(() => subNavigation
         .map((navigationItem, navigationItemIndex) => ({
         navigationItem,
@@ -130,6 +130,13 @@ function DashboardSidebarSubNavigation({ subNavigation, basePath = "", depth = 0
                             : {})
                     } }, `divider-${depth}-${navigationItemIndex}`));
             }
+            if (navigationItem.hidden) {
+                return null;
+            }
+            let children = navigationItem.children?.filter((child) => child.kind === "divider" || child.kind === "header" || !child.hidden);
+            if (children && children.length === 0) {
+                children = undefined;
+            }
             const navigationItemFullPath = (0, navigation_1.getPageItemFullPath)(basePath, navigationItem);
             const navigationItemId = `${depth}-${navigationItemIndex}`;
             const navigationItemTitle = (0, navigation_1.getItemTitle)(navigationItem);
@@ -139,7 +146,10 @@ function DashboardSidebarSubNavigation({ subNavigation, basePath = "", depth = 0
             // If the item is selected, we don't want to select more
             const isSelected = selectedItemId
                 ? false
-                : (0, navigation_1.isPageItemSelected)(navigationItem, basePath, pathname);
+                : (0, navigation_1.isPageItemSelected)(navigationItem, basePath, pathname) ||
+                    navigationItem.children?.some((child) => (child.kind === "page" || child.kind == null) &&
+                        child.hidden &&
+                        (0, navigation_1.isPageItemSelected)(child, navigationItemFullPath, pathname));
             if (isSelected && !selectedItemId) {
                 selectedItemId = navigationItemId;
             }
@@ -147,10 +157,10 @@ function DashboardSidebarSubNavigation({ subNavigation, basePath = "", depth = 0
                     py: 0,
                     px: 1,
                     overflowX: "hidden"
-                }, children: (0, jsx_runtime_1.jsxs)(NavigationListItemButton, { selected: isSelected && (!navigationItem.children || isMini), sx: {
+                }, children: (0, jsx_runtime_1.jsxs)(NavigationListItemButton, { selected: isSelected && (!children || isMini), sx: {
                         px: 1.4,
                         height: 48
-                    }, ...(navigationItem.children && !isMini
+                    }, ...(children && !isMini
                         ? {
                             onClick: handleOpenFolderClick(navigationItemId)
                         }
@@ -177,9 +187,9 @@ function DashboardSidebarSubNavigation({ subNavigation, basePath = "", depth = 0
                                 }
                             } }), navigationItem.action && !isMini && isFullyExpanded
                             ? navigationItem.action
-                            : null, navigationItem.children && !isMini && isFullyExpanded
+                            : null, children && !isMini && isFullyExpanded
                             ? nestedNavigationCollapseIcon
                             : null] }) }));
-            return ((0, jsx_runtime_1.jsxs)(React.Fragment, { children: [isMini ? ((0, jsx_runtime_1.jsx)(Tooltip_1.default, { title: navigationItemTitle, placement: "right", children: listItem })) : (listItem), navigationItem.children && !isMini ? ((0, jsx_runtime_1.jsx)(Collapse_1.default, { in: isNestedNavigationExpanded, timeout: "auto", unmountOnExit: true, children: (0, jsx_runtime_1.jsx)(DashboardSidebarSubNavigation, { subNavigation: navigationItem.children, basePath: navigationItemFullPath, depth: depth + 1, onLinkClick: onLinkClick, selectedItemId: selectedItemId }) })) : null] }, navigationItemId));
+            return ((0, jsx_runtime_1.jsxs)(React.Fragment, { children: [isMini ? ((0, jsx_runtime_1.jsx)(Tooltip_1.default, { title: navigationItemTitle, placement: "right", children: listItem })) : (listItem), children && !isMini ? ((0, jsx_runtime_1.jsx)(Collapse_1.default, { in: isNestedNavigationExpanded, timeout: "auto", unmountOnExit: true, children: (0, jsx_runtime_1.jsx)(DashboardSidebarSubNavigation, { subNavigation: children, basePath: navigationItemFullPath, depth: depth + 1, onLinkClick: onLinkClick, selectedItemId: selectedItemId }) })) : null] }, navigationItemId));
         }) }));
 }

package/build/cjs/PageContainer/PageContainer.js

@@ -90,10 +90,10 @@ function PageDataContextProvider(props) {
 }
 function PageContainerBar(props) {
     const { defaultTitle, slots, slotProps } = props;
-    const { state, dispatch } = React.useContext(exports.PageDataContext);
+    const { state } = React.useContext(exports.PageDataContext);
     const activePage = (0, useActivePage_1.useActivePage)();
     React.useLayoutEffect(() => {
-        // Reset the state when the active page changes without rerendering
+        // Reset the state without rerendering
         state.breadcrumbs = undefined;
         state.noBreadcrumbs = undefined;
         state.noPageHeader = undefined;

package/build/cjs/shared/navigation.js

@@ -26,9 +26,6 @@ function isPageItemSelected(navigationItem, basePath, pathname) {
     if (navigationItem.pattern) {
         return (0, path_to_regexp_1.pathToRegexp)(`${basePath}/${navigationItem.pattern}`).test(pathname);
     }
-    if (navigationItem.subs) {
-        return navigationItem.subs.some((sub) => new RegExp(sub).test(pathname));
-    }
     return getPageItemFullPath(basePath, navigationItem) === pathname;
 }
 function hasSelectedNavigationChildren(navigationItem, basePath, pathname) {
@@ -127,15 +124,11 @@ function getItemLookup(navigation) {
 function matchPath(navigation, path) {
     const lookup = getItemLookup(navigation);
     for (const [key, item] of lookup.entries()) {
-        if (typeof key === "string") {
-            if (key === path)
-                return item;
-            else if (item.subs?.some((sub) => new RegExp(sub).test(path)))
-                return item;
+        if (typeof key === "string" && key === path) {
+            return item;
         }
-        else if (key instanceof RegExp) {
-            if (key.test(path))
-                return item;
+        if (key instanceof RegExp && key.test(path)) {
+            return item;
         }
     }
     return null;

package/build/cjs/useActivePage/useActivePage.js

@@ -41,13 +41,14 @@ const navigation_1 = require("../shared/navigation");
 function useActivePage() {
     const navigationContext = React.useContext(context_1.NavigationContext);
     const routerContext = React.useContext(context_1.RouterContext);
-    const pathname = routerContext?.pathname ?? "/";
+    const pageRef = React.useRef(null);
+    let pathname = routerContext?.pathname ?? "/";
     const activeItem = (0, navigation_1.matchPath)(navigationContext, pathname);
     const rootItem = (0, navigation_1.matchPath)(navigationContext, "/");
-    return React.useMemo(() => {
-        if (!activeItem) {
-            return null;
-        }
+    if (!activeItem) {
+        pageRef.current = null;
+    }
+    else {
         const breadcrumbs = [];
         if (rootItem) {
             breadcrumbs.push({
@@ -73,11 +74,19 @@ function useActivePage() {
                 });
             }
         }
-        return {
-            title: (0, navigation_1.getItemTitle)(activeItem),
-            path: (0, navigation_1.getItemPath)(navigationContext, activeItem),
-            sourcePath: pathname,
-            breadcrumbs
-        };
-    }, [activeItem, rootItem, pathname, navigationContext]);
+        const title = (0, navigation_1.getItemTitle)(activeItem);
+        const path = (0, navigation_1.getItemPath)(navigationContext, activeItem);
+        if (pageRef.current == null ||
+            pageRef.current.title !== title ||
+            pageRef.current.path !== path ||
+            pageRef.current.sourcePath !== pathname) {
+            pageRef.current = {
+                title,
+                path,
+                sourcePath: pathname,
+                breadcrumbs
+            };
+        }
+    }
+    return pageRef.current;
 }

package/build/mjs/AppProvider/AppProvider.d.ts

@@ -27,7 +27,7 @@ export interface NavigationPageItem {
     pattern?: string;
     action?: React.ReactNode;
     children?: Navigation;
-    subs?: string[];
+    hidden?: boolean;
 }
 export interface NavigationSubheaderItem {
     kind: "header";

package/build/mjs/DashboardLayout/DashboardLayout.test.js

@@ -126,6 +126,12 @@ describe("DashboardLayout", () => {
                         segment: "traffic",
                         title: "Traffic",
                         icon: _jsx(DescriptionIcon, {})
+                    },
+                    {
+                        segment: "hidden",
+                        title: "Hidden",
+                        icon: _jsx(DescriptionIcon, {}),
+                        hidden: true
                     }
                 ]
             }
@@ -141,6 +147,7 @@ describe("DashboardLayout", () => {
         });
         expect(within(desktopNavigation).getByText("Sales")).toBeTruthy();
         expect(within(desktopNavigation).getByText("Traffic")).toBeTruthy();
+        expect(within(desktopNavigation).queryByText("Hidden")).toBeNull();
     });
     test("shows correct selected page item", () => {
         const NAVIGATION = [
@@ -152,7 +159,14 @@ describe("DashboardLayout", () => {
             {
                 title: "Orders",
                 segment: "orders",
-                icon: _jsx(ShoppingCartIcon, {})
+                icon: _jsx(ShoppingCartIcon, {}),
+                children: [
+                    {
+                        segment: "nested",
+                        title: "Nested",
+                        hidden: true
+                    }
+                ]
             },
             {
                 segment: "dynamic",
@@ -192,6 +206,8 @@ describe("DashboardLayout", () => {
         rerender(_jsx(AppWithPathname, { pathname: "/orders" }));
         expect(within(desktopNavigation).getByRole("link", { name: "Dashboard" })).not.toHaveClass("Mui-selected");
         expect(within(desktopNavigation).getByRole("link", { name: "Orders" })).toHaveClass("Mui-selected");
+        rerender(_jsx(AppWithPathname, { pathname: "/orders/nested" }));
+        expect(within(desktopNavigation).getByRole("link", { name: "Orders" })).toHaveClass("Mui-selected");
         rerender(_jsx(AppWithPathname, { pathname: "/dynamic" }));
         expect(within(desktopNavigation).getByRole("link", { name: "Dynamic" })).not.toHaveClass("Mui-selected");
         rerender(_jsx(AppWithPathname, { pathname: "/dynamic/123" }));

package/build/mjs/DashboardLayout/DashboardSidebarSubNavigation.js

@@ -14,10 +14,10 @@ import Tooltip from "@mui/material/Tooltip";
 import ExpandLessIcon from "@mui/icons-material/ExpandLess";
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 import { Link } from "../shared/Link";
-import { RouterContext } from "../shared/context";
 import { getItemTitle, getPageItemFullPath, hasSelectedNavigationChildren, isPageItemSelected } from "../shared/navigation";
 import { getDrawerSxTransitionMixin } from "./utils";
 import { styled } from "@mui/material/styles";
+import { useActivePage } from "../useActivePage/useActivePage";
 const NavigationListItemButton = styled(ListItemButton)(({ theme }) => ({
     borderRadius: 8,
     "&.Mui-selected": {
@@ -48,8 +48,8 @@ const NavigationListItemButton = styled(ListItemButton)(({ theme }) => ({
  * @ignore - internal component.
  */
 function DashboardSidebarSubNavigation({ subNavigation, basePath = "", depth = 0, onLinkClick, isMini = false, isFullyExpanded = true, hasDrawerTransitions = false, selectedItemId }) {
-    const routerContext = React.useContext(RouterContext);
-    const pathname = routerContext?.pathname ?? "/";
+    const activePage = useActivePage();
+    const pathname = activePage?.sourcePath ?? "/";
     const initialExpandedSidebarItemIds = React.useMemo(() => subNavigation
         .map((navigationItem, navigationItemIndex) => ({
         navigationItem,
@@ -91,6 +91,13 @@ function DashboardSidebarSubNavigation({ subNavigation, basePath = "", depth = 0
                             : {})
                     } }, `divider-${depth}-${navigationItemIndex}`));
             }
+            if (navigationItem.hidden) {
+                return null;
+            }
+            let children = navigationItem.children?.filter((child) => child.kind === "divider" || child.kind === "header" || !child.hidden);
+            if (children && children.length === 0) {
+                children = undefined;
+            }
             const navigationItemFullPath = getPageItemFullPath(basePath, navigationItem);
             const navigationItemId = `${depth}-${navigationItemIndex}`;
             const navigationItemTitle = getItemTitle(navigationItem);
@@ -100,7 +107,10 @@ function DashboardSidebarSubNavigation({ subNavigation, basePath = "", depth = 0
             // If the item is selected, we don't want to select more
             const isSelected = selectedItemId
                 ? false
-                : isPageItemSelected(navigationItem, basePath, pathname);
+                : isPageItemSelected(navigationItem, basePath, pathname) ||
+                    navigationItem.children?.some((child) => (child.kind === "page" || child.kind == null) &&
+                        child.hidden &&
+                        isPageItemSelected(child, navigationItemFullPath, pathname));
             if (isSelected && !selectedItemId) {
                 selectedItemId = navigationItemId;
             }
@@ -108,10 +118,10 @@ function DashboardSidebarSubNavigation({ subNavigation, basePath = "", depth = 0
                     py: 0,
                     px: 1,
                     overflowX: "hidden"
-                }, children: _jsxs(NavigationListItemButton, { selected: isSelected && (!navigationItem.children || isMini), sx: {
+                }, children: _jsxs(NavigationListItemButton, { selected: isSelected && (!children || isMini), sx: {
                         px: 1.4,
                         height: 48
-                    }, ...(navigationItem.children && !isMini
+                    }, ...(children && !isMini
                         ? {
                             onClick: handleOpenFolderClick(navigationItemId)
                         }
@@ -138,10 +148,10 @@ function DashboardSidebarSubNavigation({ subNavigation, basePath = "", depth = 0
                                 }
                             } }), navigationItem.action && !isMini && isFullyExpanded
                             ? navigationItem.action
-                            : null, navigationItem.children && !isMini && isFullyExpanded
+                            : null, children && !isMini && isFullyExpanded
                             ? nestedNavigationCollapseIcon
                             : null] }) }));
-            return (_jsxs(React.Fragment, { children: [isMini ? (_jsx(Tooltip, { title: navigationItemTitle, placement: "right", children: listItem })) : (listItem), navigationItem.children && !isMini ? (_jsx(Collapse, { in: isNestedNavigationExpanded, timeout: "auto", unmountOnExit: true, children: _jsx(DashboardSidebarSubNavigation, { subNavigation: navigationItem.children, basePath: navigationItemFullPath, depth: depth + 1, onLinkClick: onLinkClick, selectedItemId: selectedItemId }) })) : null] }, navigationItemId));
+            return (_jsxs(React.Fragment, { children: [isMini ? (_jsx(Tooltip, { title: navigationItemTitle, placement: "right", children: listItem })) : (listItem), children && !isMini ? (_jsx(Collapse, { in: isNestedNavigationExpanded, timeout: "auto", unmountOnExit: true, children: _jsx(DashboardSidebarSubNavigation, { subNavigation: children, basePath: navigationItemFullPath, depth: depth + 1, onLinkClick: onLinkClick, selectedItemId: selectedItemId }) })) : null] }, navigationItemId));
         }) }));
 }
 export { DashboardSidebarSubNavigation };

package/build/mjs/PageContainer/PageContainer.js

@@ -49,10 +49,10 @@ export function PageDataContextProvider(props) {
 }
 function PageContainerBar(props) {
     const { defaultTitle, slots, slotProps } = props;
-    const { state, dispatch } = React.useContext(PageDataContext);
+    const { state } = React.useContext(PageDataContext);
     const activePage = useActivePage();
     React.useLayoutEffect(() => {
-        // Reset the state when the active page changes without rerendering
+        // Reset the state without rerendering
         state.breadcrumbs = undefined;
         state.noBreadcrumbs = undefined;
         state.noPageHeader = undefined;

package/build/mjs/shared/navigation.js

@@ -12,9 +12,6 @@ export function isPageItemSelected(navigationItem, basePath, pathname) {
     if (navigationItem.pattern) {
         return pathToRegexp(`${basePath}/${navigationItem.pattern}`).test(pathname);
     }
-    if (navigationItem.subs) {
-        return navigationItem.subs.some((sub) => new RegExp(sub).test(pathname));
-    }
     return getPageItemFullPath(basePath, navigationItem) === pathname;
 }
 export function hasSelectedNavigationChildren(navigationItem, basePath, pathname) {
@@ -113,15 +110,11 @@ function getItemLookup(navigation) {
 export function matchPath(navigation, path) {
     const lookup = getItemLookup(navigation);
     for (const [key, item] of lookup.entries()) {
-        if (typeof key === "string") {
-            if (key === path)
-                return item;
-            else if (item.subs?.some((sub) => new RegExp(sub).test(path)))
-                return item;
+        if (typeof key === "string" && key === path) {
+            return item;
         }
-        else if (key instanceof RegExp) {
-            if (key.test(path))
-                return item;
+        if (key instanceof RegExp && key.test(path)) {
+            return item;
         }
     }
     return null;

package/build/mjs/useActivePage/useActivePage.js

@@ -5,13 +5,14 @@ import { getItemPath, getItemTitle, matchPath } from "../shared/navigation";
 export function useActivePage() {
     const navigationContext = React.useContext(NavigationContext);
     const routerContext = React.useContext(RouterContext);
-    const pathname = routerContext?.pathname ?? "/";
+    const pageRef = React.useRef(null);
+    let pathname = routerContext?.pathname ?? "/";
     const activeItem = matchPath(navigationContext, pathname);
     const rootItem = matchPath(navigationContext, "/");
-    return React.useMemo(() => {
-        if (!activeItem) {
-            return null;
-        }
+    if (!activeItem) {
+        pageRef.current = null;
+    }
+    else {
         const breadcrumbs = [];
         if (rootItem) {
             breadcrumbs.push({
@@ -37,11 +38,19 @@ export function useActivePage() {
                 });
             }
         }
-        return {
-            title: getItemTitle(activeItem),
-            path: getItemPath(navigationContext, activeItem),
-            sourcePath: pathname,
-            breadcrumbs
-        };
-    }, [activeItem, rootItem, pathname, navigationContext]);
+        const title = getItemTitle(activeItem);
+        const path = getItemPath(navigationContext, activeItem);
+        if (pageRef.current == null ||
+            pageRef.current.title !== title ||
+            pageRef.current.path !== path ||
+            pageRef.current.sourcePath !== pathname) {
+            pageRef.current = {
+                title,
+                path,
+                sourcePath: pathname,
+                breadcrumbs
+            };
+        }
+    }
+    return pageRef.current;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/toolpad",
-  "version": "1.0.28",
+  "version": "1.0.29",
   "author": "ETSOO",
   "description": "Dashboard framework extention based on Toolpad Core",
   "main": "build/cjs/index.js",

package/src/AppProvider/AppProvider.tsx

@@ -35,7 +35,7 @@ export interface NavigationPageItem {
   pattern?: string;
   action?: React.ReactNode;
   children?: Navigation;
-  subs?: string[];
+  hidden?: boolean;
 }
 
 export interface NavigationSubheaderItem {

package/src/DashboardLayout/DashboardLayout.test.tsx

@@ -175,6 +175,12 @@ describe("DashboardLayout", () => {
             segment: "traffic",
             title: "Traffic",
             icon: <DescriptionIcon />
+          },
+          {
+            segment: "hidden",
+            title: "Hidden",
+            icon: <DescriptionIcon />,
+            hidden: true
           }
         ]
       }
@@ -198,6 +204,7 @@ describe("DashboardLayout", () => {
 
     expect(within(desktopNavigation).getByText("Sales")).toBeTruthy();
     expect(within(desktopNavigation).getByText("Traffic")).toBeTruthy();
+    expect(within(desktopNavigation).queryByText("Hidden")).toBeNull();
   });
 
   test("shows correct selected page item", () => {
@@ -210,7 +217,14 @@ describe("DashboardLayout", () => {
       {
         title: "Orders",
         segment: "orders",
-        icon: <ShoppingCartIcon />
+        icon: <ShoppingCartIcon />,
+        children: [
+          {
+            segment: "nested",
+            title: "Nested",
+            hidden: true
+          }
+        ]
       },
       {
         segment: "dynamic",
@@ -268,6 +282,11 @@ describe("DashboardLayout", () => {
       within(desktopNavigation).getByRole("link", { name: "Orders" })
     ).toHaveClass("Mui-selected");
 
+    rerender(<AppWithPathname pathname="/orders/nested" />);
+    expect(
+      within(desktopNavigation).getByRole("link", { name: "Orders" })
+    ).toHaveClass("Mui-selected");
+
     rerender(<AppWithPathname pathname="/dynamic" />);
     expect(
       within(desktopNavigation).getByRole("link", { name: "Dynamic" })

package/src/DashboardLayout/DashboardSidebarSubNavigation.tsx

@@ -14,7 +14,6 @@ import type {} from "@mui/material/themeCssVarsAugmentation";
 import ExpandLessIcon from "@mui/icons-material/ExpandLess";
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 import { Link } from "../shared/Link";
-import { RouterContext } from "../shared/context";
 import type { Navigation } from "../AppProvider";
 import {
   getItemTitle,
@@ -24,6 +23,7 @@ import {
 } from "../shared/navigation";
 import { getDrawerSxTransitionMixin } from "./utils";
 import { styled } from "@mui/material/styles";
+import { useActivePage } from "../useActivePage/useActivePage";
 
 const NavigationListItemButton = styled(ListItemButton)(({ theme }) => ({
   borderRadius: 8,
@@ -76,9 +76,9 @@ function DashboardSidebarSubNavigation({
   hasDrawerTransitions = false,
   selectedItemId
 }: DashboardSidebarSubNavigationProps) {
-  const routerContext = React.useContext(RouterContext);
+  const activePage = useActivePage();
 
-  const pathname = routerContext?.pathname ?? "/";
+  const pathname = activePage?.sourcePath ?? "/";
 
   const initialExpandedSidebarItemIds = React.useMemo(
     () =>
@@ -157,6 +157,18 @@ function DashboardSidebarSubNavigation({
           );
         }
 
+        if (navigationItem.hidden) {
+          return null;
+        }
+
+        let children = navigationItem.children?.filter(
+          (child) =>
+            child.kind === "divider" || child.kind === "header" || !child.hidden
+        );
+        if (children && children.length === 0) {
+          children = undefined;
+        }
+
         const navigationItemFullPath = getPageItemFullPath(
           basePath,
           navigationItem
@@ -178,7 +190,13 @@ function DashboardSidebarSubNavigation({
         // If the item is selected, we don't want to select more
         const isSelected = selectedItemId
           ? false
-          : isPageItemSelected(navigationItem, basePath, pathname);
+          : isPageItemSelected(navigationItem, basePath, pathname) ||
+            navigationItem.children?.some(
+              (child) =>
+                (child.kind === "page" || child.kind == null) &&
+                child.hidden &&
+                isPageItemSelected(child, navigationItemFullPath, pathname)
+            );
 
         if (isSelected && !selectedItemId) {
           selectedItemId = navigationItemId;
@@ -193,12 +211,12 @@ function DashboardSidebarSubNavigation({
             }}
           >
             <NavigationListItemButton
-              selected={isSelected && (!navigationItem.children || isMini)}
+              selected={isSelected && (!children || isMini)}
               sx={{
                 px: 1.4,
                 height: 48
               }}
-              {...(navigationItem.children && !isMini
+              {...(children && !isMini
                 ? {
                     onClick: handleOpenFolderClick(navigationItemId)
                   }
@@ -248,7 +266,7 @@ function DashboardSidebarSubNavigation({
               {navigationItem.action && !isMini && isFullyExpanded
                 ? navigationItem.action
                 : null}
-              {navigationItem.children && !isMini && isFullyExpanded
+              {children && !isMini && isFullyExpanded
                 ? nestedNavigationCollapseIcon
                 : null}
             </NavigationListItemButton>
@@ -265,14 +283,14 @@ function DashboardSidebarSubNavigation({
               listItem
             )}
 
-            {navigationItem.children && !isMini ? (
+            {children && !isMini ? (
               <Collapse
                 in={isNestedNavigationExpanded}
                 timeout="auto"
                 unmountOnExit
               >
                 <DashboardSidebarSubNavigation
-                  subNavigation={navigationItem.children}
+                  subNavigation={children}
                   basePath={navigationItemFullPath}
                   depth={depth + 1}
                   onLinkClick={onLinkClick}

package/src/PageContainer/PageContainer.tsx

@@ -115,12 +115,12 @@ type PageContainerBarProps = {
 function PageContainerBar(props: PageContainerBarProps) {
   const { defaultTitle, slots, slotProps } = props;
 
-  const { state, dispatch } = React.useContext(PageDataContext);
+  const { state } = React.useContext(PageDataContext);
 
   const activePage = useActivePage();
 
   React.useLayoutEffect(() => {
-    // Reset the state when the active page changes without rerendering
+    // Reset the state without rerendering
     state.breadcrumbs = undefined;
     state.noBreadcrumbs = undefined;
     state.noPageHeader = undefined;

package/src/shared/navigation.tsx

@@ -36,10 +36,6 @@ export function isPageItemSelected(
     return pathToRegexp(`${basePath}/${navigationItem.pattern}`).test(pathname);
   }
 
-  if (navigationItem.subs) {
-    return navigationItem.subs.some((sub) => new RegExp(sub).test(pathname));
-  }
-
   return getPageItemFullPath(basePath, navigationItem) === pathname;
 }
 
@@ -178,12 +174,11 @@ export function matchPath(
   const lookup = getItemLookup(navigation);
 
   for (const [key, item] of lookup.entries()) {
-    if (typeof key === "string") {
-      if (key === path) return item;
-      else if (item.subs?.some((sub) => new RegExp(sub).test(path)))
-        return item;
-    } else if (key instanceof RegExp) {
-      if (key.test(path)) return item;
+    if (typeof key === "string" && key === path) {
+      return item;
+    }
+    if (key instanceof RegExp && key.test(path)) {
+      return item;
     }
   }
 

package/src/useActivePage/useActivePage.ts

@@ -14,16 +14,17 @@ export interface ActivePage {
 export function useActivePage(): ActivePage | null {
   const navigationContext = React.useContext(NavigationContext);
   const routerContext = React.useContext(RouterContext);
-  const pathname = routerContext?.pathname ?? "/";
+
+  const pageRef = React.useRef<ActivePage>(null);
+
+  let pathname = routerContext?.pathname ?? "/";
   const activeItem = matchPath(navigationContext, pathname);
 
   const rootItem = matchPath(navigationContext, "/");
 
-  return React.useMemo(() => {
-    if (!activeItem) {
-      return null;
-    }
-
+  if (!activeItem) {
+    pageRef.current = null;
+  } else {
     const breadcrumbs: Breadcrumb[] = [];
 
     if (rootItem) {
@@ -52,11 +53,23 @@ export function useActivePage(): ActivePage | null {
       }
     }
 
-    return {
-      title: getItemTitle(activeItem),
-      path: getItemPath(navigationContext, activeItem),
-      sourcePath: pathname,
-      breadcrumbs
-    };
-  }, [activeItem, rootItem, pathname, navigationContext]);
+    const title = getItemTitle(activeItem);
+    const path = getItemPath(navigationContext, activeItem);
+
+    if (
+      pageRef.current == null ||
+      pageRef.current.title !== title ||
+      pageRef.current.path !== path ||
+      pageRef.current.sourcePath !== pathname
+    ) {
+      pageRef.current = {
+        title,
+        path,
+        sourcePath: pathname,
+        breadcrumbs
+      };
+    }
+  }
+
+  return pageRef.current;
 }