# All files / src/layout Layout.tsx

0% Statements 0/50
0% Branches 0/1
0% Functions 0/1
0% Lines 0/50

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51

     import type { ReactElement } from "react";
    import type { TreeItemNode } from "../tree";
    import {
      DEFAULT_DESKTOP_LAYOUT,
      DEFAULT_LANDSCAPE_TABLET_LAYOUT,
      DEFAULT_PHONE_LAYOUT,
      DEFAULT_TABLET_LAYOUT,
    } from "./constants";
    import type { LayoutChildrenProps } from "./LayoutChildren";
    import { LayoutChildren } from "./LayoutChildren";
    import { LayoutProvider } from "./LayoutProvider";
    import type { LayoutConfiguration, LayoutNavigationItem } from "./types";

    export interface LayoutProps<T extends TreeItemNode = LayoutNavigationItem>
      extends LayoutConfiguration,
        LayoutChildrenProps<T> {}

    export function Layout<T extends TreeItemNode = LayoutNavigationItem>(
      props: LayoutProps<T>
    ): ReactElement {
      const {
        id = "layout",
        phoneLayout = DEFAULT_PHONE_LAYOUT,
        tabletLayout = DEFAULT_TABLET_LAYOUT,
        landscapeTabletLayout = DEFAULT_LANDSCAPE_TABLET_LAYOUT,
        desktopLayout = DEFAULT_DESKTOP_LAYOUT,
        largeDesktopLayout,
        defaultToggleableVisible = false,
        ...remaining
      } = props;

      return (
        <LayoutProvider
          baseId={id}
          appBarPosition={
            props.appBarProps?.position ?? typeof props.appBar === "undefined"
              ? "fixed"
              : "static"
          }
          phoneLayout={phoneLayout}
          tabletLayout={tabletLayout}
          landscapeTabletLayout={landscapeTabletLayout}
          desktopLayout={desktopLayout}
          largeDesktopLayout={largeDesktopLayout}
          defaultToggleableVisible={defaultToggleableVisible}
        >
          <LayoutChildren id={id} {...remaining} />
        </LayoutProvider>
      );
    }