# All files / layout LayoutAppBar.tsx

100% Statements 91/91
100% Branches 1/1
100% Functions 1/1
100% Lines 91/91

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
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    921x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    10x
    10x
    10x
    10x
    10x
    10x
    10x
    10x
    10x
    10x
    10x
    10x
    10x
    10x
    10x
    10x
    10x
    10x
    10x
    10x
    10x
    10x
    10x
    10x
    10x
    1x
     "use client";
    import { forwardRef } from "react";
    import type { AppBarProps, CustomAppBarComponent } from "../app-bar/AppBar.js";
    import { AppBar } from "../app-bar/AppBar.js";
    import type { SkipToMainContentProps } from "../link/SkipToMainContent.js";
    import { SkipToMainContent } from "../link/SkipToMainContent.js";
    import { useCSSVariables } from "../theme/useCSSVariables.js";
    import { CssPosition, PropsWithRef } from "../types.js";
    import { useEnsuredId } from "../useEnsuredId.js";
    import { useLayoutAppBarHeight } from "./useLayoutAppBarHeight.js";

    /**
     * @remarks \@since 6.0.0 Only supports `AppBar` + `SkipToMainContent` props
     */
    export interface LayoutAppBarProps extends AppBarProps {
      /** @defaultValue `"header"` */
      as?: CustomAppBarComponent;

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

      /**
       * Any additional props to pass to the {@link SkipToMainContent} component.
       */
      skipProps?: PropsWithRef<SkipToMainContentProps, HTMLAnchorElement>;
    }

    /**
     * **Client Component**
     *
     * This component is used to dynamically update the `--rmd-layout-header-offset`
     * based on the current height of this app bar. If you are concerned about
     * javascript bundle size, it is recommended to configure this variable in SCSS
     * instead.
     *
     * @example
     * Static Height
     * ```scss
     * @use "everything";
     *
     * :root {
     *   @include everything.layout-set-var(header-height, everything.$app-bar-height);
     * }
     * ```
     *
     * @example
     * Media Query Height Changes
     * ```scss
     * @use "everything";
     *
     * :root {
     *   @include everything.layout-set-var(header-height, everything.$app-bar-height);
     *   @include everything.tablet-media {
     *     @include everything.layout-set-var(header-height, everything.$app-bar-dense-height);
     *   }
     * }
     * ```
     *
     * @remarks
     * \@since 6.0.0 This component no longer renders the `LayoutNavToggle` and
     * `LayoutAppBarTitle` since they no longer exist. The only purpose of this
     * component is to dynamically set the `--rmd-layout-header-height` variable.
     */
    export const LayoutAppBar = forwardRef<HTMLDivElement, LayoutAppBarProps>(
      function LayoutAppBar(props, ref) {
        const {
          as = "header",
          id: propId,
          position = "fixed",
          skipProps,
          children,
          ...remaining
        } = props;
        const id = useEnsuredId(propId, "layout-header");
        const { appBarRef, variables } = useLayoutAppBarHeight(ref);
        useCSSVariables(variables);

        return (
          <AppBar
            {...remaining}
            id={id}
            as={as}
            ref={appBarRef}
            position={position}
          >
            <SkipToMainContent {...skipProps} />
            {children}
          </AppBar>
        );
      }
    );