# All files / src/main-layout MainLayoutNavigationButton.tsx

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

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

     import { cnb } from "cnbuilder";
    import type { ReactNode } from "react";
    import { forwardRef } from "react";
    import type { ButtonProps, ButtonType } from "../button";
    import { Button } from "../button";
    import { useIcon } from "../icon";
    import type { PropsWithRef } from "../types";
    import { bem } from "../utils";
    import { useMainLayout } from "./useMainLayout";

    const noop = (): void => {
      // do nothing
    };
    const styles = bem("rmd-layout-navigation-button");

    export interface MainLayoutNavigationButtonProps extends ButtonProps {
      /**
       * @defaultValue `"Navigation"`
       */
      "aria-label"?: string;

      /** @defaultValue `"icon"` */
      buttonType?: ButtonType;

      /** @defaultValue `useIcon("menu")` */
      children?: ReactNode;
    }

    export type ConfigurableMainLayoutNavigationButtonProps = PropsWithRef<
      MainLayoutNavigationButtonProps,
      HTMLButtonElement
    > | null;

    export const MainLayoutNavigationButton = forwardRef<
      HTMLButtonElement,
      MainLayoutNavigationButtonProps
    >(function MainLayoutNavigationButton(props, ref) {
      const {
        buttonType = "icon",
        "aria-labelledby": ariaLabelledBy,
        "aria-label": ariaLabel = buttonType === "icon" && !ariaLabelledBy
          ? "Navigation"
          : undefined,
        className,
        children: propChildren,
        onClick = noop,
        ...remaining
      } = props;
      const children = useIcon("menu", propChildren);

      const { toggleNavigation, variant, currentLayout } = useMainLayout();

      return (
        <Button
          {...remaining}
          aria-label={ariaLabel}
          aria-labelledby={ariaLabelledBy}
          ref={ref}
          buttonType={buttonType}
          className={cnb(styles(), className)}
          onClick={(event) => {
            onClick(event);
            toggleNavigation();
          }}
          hidden={currentLayout === "persistent"}
        >
          {children}
        </Button>
      );
    });