How to integrate MUI Toolpad's PageContainer with a custom Sidebar?

Question

Material UI has a component called PageContainer which provides a title and breadcrumb navigation as shown here:

https://mui.com/toolpad/core/react-page-container/

I want to navigate to the same place as the MUI Breadcrumbs using a SideBar component. I'm having trouble integrating them. When I click on a breadcrumb, I want to navigate to the selected page, and have the sidebar update, and vice versa.

I think the problem is because each component is using a different way of navigating. The SideBar is using React Router:

function App() {
  return (
    <Router>
      <PageContainerBasic />
      <Routes>
        <Route path="/home" element={<Home />} />
        <Route path="/home/about-us" element={<AboutUs />} />
        <Route path="/home/services" element={<Services />} />
        <Route path="/home/events" element={<Events />} />
      </Routes>
    </Router>
  );

whereas the Breadcrumbs is using a React.Memo() with a navigate prop.

    const NAVIGATION: Navigation = [
      { segment: "home", title: "Home" },
      { segment: "home/about-us", title: "About Us" },
      { segment: "home/services", title: "Services" },
      { segment: "home/events", title: "Events" },
    ];
    
    function PageContainerBasic(props: any) {
      const { window } = props;
      const router = useDemoRouter("/home/events");
      const theme = useTheme();
      const demoWindow = window ? window() : undefined;
    
      function useDemoRouter(path: string): Router {
        const [pathname, setPathname] = React.useState(path);
    
        const router = React.useMemo(() => {
          return {
            pathname,
            navigate: (path: string | URL) => setPathname(String(path)),
          };
        }, [pathname]);
    
        return router;
      }

  function DemoPageContent({ pathname }: { pathname: string }) {
    return (
      <Box>
        <Sidebar />
      </Box>
    );
  }

  return (
    <AppProvider
      navigation={NAVIGATION}
      router={router}
      theme={theme}
      window={demoWindow}
    >
      <Paper sx={{ p: 2, width: "100%" }}>
        <PageContainer
          slots={{
            header: CustomPageHeader,
          }}
        >
          <DemoPageContent pathname={router.pathname} />
        </PageContainer>
      </Paper>
    </AppProvider>
  );
}

But I can't figure out how to integrate them.

I've put together a sandbox demo here:

https://codesandbox.io/p/sandbox/sidebar-testing-t2v5zt

Answer 1

It was surprisingly difficult to find a solution that contains all the desired ingredients of a good website, including hamburger sidenav, breadcrumbs, and router. But I finally found a simple example and created a sandbox demo here: https://codesandbox.io/p/sandbox/9mll7z