The deep nested page with fullscreen layout

Even if the page is nested, we can omit parent layout parts.

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

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

Check the page with sidebar that has nested fullscreen route: Page with a sidebar