# All files / src/layout LayoutAppBar.tsx

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

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
    92
    93
    94
    95
    96
    971x
    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
    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 {
      AppBar,
      type AppBarProps,
      type CustomAppBarComponent,
    } from "../app-bar/AppBar.js";
    import {
      SkipToMainContent,
      type SkipToMainContentProps,
    } from "../link/SkipToMainContent.js";
    import { useCSSVariables } from "../theme/useCSSVariables.js";
    import { type CssPosition, type 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>
        );
      }
    );