useTemporaryLayout

function useTemporaryLayout(
  options: TemporaryLayoutOptions
): TemporaryLayoutImplementation;

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

import { CustomNavigation } from "./CustomNavigation.js";

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 {
    mainProps,
    navToggleProps,
    temporaryNavProps,
  } = useTemporaryLayout({ pathname });

  return (
    <>
      <AppBar position="fixed">
        <Button {...navToggleProps} />
        <AppBarTitle>Hello, world!</AppBarTitle>
      </AppBar>
      <Main {...mainProps}>{children}</Main>
      <Sheet {...temporaryNavProps}>
        <CustomNavigation />
      </Sheet>
    </>
  );
}

export interface TemporaryLayoutOptions {
  /**
   * This is used to automatically hide the temporary navigation whenever the
   * route changes. Set this to `null` if you want to handle closing yourself.
   */
  pathname: string | null;

  /** @defaultValue `"fixed"` */
  appBarPosition?: CssPosition;

  /** @defaultValue `false` */
  defaultVisible?: UseStateInitializer<boolean>;
}

export interface TemporaryLayoutImplementation {
  visible: boolean;
  showTemporaryNav: () => void;
  hideTemporaryNav: () => void;
  appBarProps: ProvidedTemporaryLayoutAppBarProps;
  mainProps: ProvidedTemporaryLayoutMainProps;
  navToggleProps: ProvidedLayoutNavToggleProps;
  temporaryNavProps: ProvidedTemporaryLayoutNavProps;
}

export type ProvidedLayoutNavToggleProps = PropsWithChildren<
  Pick<Required<ButtonProps>, "aria-label" | "buttonType" | "onClick">
>;

export type ProvidedTemporaryLayoutNavProps = Pick<
  Required<SheetProps>,
  "aria-label" | "visible" | "onRequestClose"
>;

export type ProvidedTemporaryLayoutMainProps = Required<
  Pick<MainProps, "appBarOffset">
>;

export type ProvidedTemporaryLayoutAppBarProps = Required<
  Pick<AppBarProps, "position">
>;