The page with a sidebar

Here is used the layout with sidebar.

export default pageComponentWithLayout(
  function Page() { /* ... */ },
  function PageLayout({ PageComponent, pageProps }) {
    // Data loading simulation
    const [pathParts, setPathParts] = useState<
      { title: string; path: string }[]
    >([]);
    const [paths, setPaths] = useState<{ title: string; path: string }[]>([]);
    useEffect(() => {
      setTimeout(() => {
        setPathParts([
          { title: "Main", path: "/" },
          { title: "Page with a sidebar", path: "/sidebar" },
        ]);
      }, 800);
    }, []);
    useEffect(() => {
      setTimeout(() => {
        setPaths([
          { title: "Page with a sidebar", path: "/sidebar" },
          {
            title: "Nested page with a fullscreen layout",
            path: "/sidebar/fullscreen",
          },
        ]);
      }, 1200);
    }, []);

    return (
      <Layout key="layout">
        <Navbar key="navbar" />
        <Breadcrumbs key="breadcrumbs" pathParts={pathParts} />
        <Sidebar key="sidebar" paths={paths}>
          <PageComponent {...pageProps} />
        </Sidebar>
      </Layout>
    );
  }
);
          

Check the nested page: Page with a fullscreen layout