useResizableLayout

function useResizableLayout(
  options: ResizableLayoutOptions
): ResizableLayoutImplementation;

import { AppBarTitle } from "@react-md/core/app-bar/AppBarTitle";
import { Button } from "@react-md/core/button/Button";
import { LayoutAppBar } from "@react-md/core/layout/LayoutAppBar";
import { LayoutNav } from "@react-md/core/layout/LayoutNav";
import { LayoutWindowSplitter } from "@react-md/core/layout/LayoutWindowSplitter";
import { Main } from "@react-md/core/layout/Main";
import { useResizableLayout } from "@react-md/core/layout/useResizableLayout";
import { Sheet } from "@react-md/core/sheet/Sheet";
import { type ReactElement, type ReactNode } from "react";

import { CustomNavigation } from "./CustomNavigation";

export interface LayoutProps {
  children: ReactNode;
}

export function Layout(props: LayoutProps): ReactElement {
  const { children } = props;

  // choose whichever one for your app
  // nextjs app dir
  const pathname = usePathname();
  // nextjs pages
  const { pathname } = useRouter();
  // react router
  const { pathname } = useHistory();

  const {
    temporary,
    appBarProps,
    expandableNavProps,
    mainProps,
    navToggleProps,
    temporaryNavProps,
    windowSplitterProps,
  } = useResizableLayout({ pathname });

  return (
    <>
      <LayoutAppBar {...appBarProps}>
        <Button {...navToggleProps} />
        <AppBarTitle>Hello, world!</AppBarTitle>
      </LayoutAppBar>
      <LayoutNav {...expandableNavProps}>
        <CustomNavigation />
      </LayoutNav>
      <LayoutWindowSplitter {...windowSplitterProps} />
      {temporary && (
        <Sheet {...temporaryNavProps}>
          <CustomNavigation />
        </Sheet>
      )}
      <Main {...mainProps}>{children}</Main>
    </>
  );
}

  const {
    temporary,
+   persistent,
    appBarProps,
    expandableNavProps,
    mainProps,
    navToggleProps,
    temporaryNavProps,
    windowSplitterProps,
  } = useResizableLayout({ pathname });

  return (
    <>
      <LayoutAppBar {...appBarProps}>
        <Button {...navToggleProps} />
        <AppBarTitle>Hello, world!</AppBarTitle>
      </LayoutAppBar>
-     <LayoutNav {...expandableNavProps}>
-       <CustomNavigation />
-     </LayoutNav>
-     <LayoutWindowSplitter {...windowSplitterProps} />
+     {persistent && (
+       <>
+         <LayoutNav {...expandableNavProps}>
+           <CustomNavigation />
+         </LayoutNav>
+         <LayoutWindowSplitter {...windowSplitterProps} />
+       </>
+     )}
      {temporary && (
        <Sheet {...temporaryNavProps}>
          <CustomNavigation />
        </Sheet>
      )}
      <Main {...mainProps}>{children}</Main>
    </>
  )

export interface Options {}