render()

in packages/eui/src/components/side_nav/side_nav.tsx [158:264]
102 lines of code
11 McCabe index (conditional complexity)

  render() {
    const {
      className,
      items,
      toggleOpenOnMobile,
      isOpenOnMobile,
      mobileTitle,
      mobileBreakpoints,
      // Extract this one out so it isn't passed to <nav>
      renderItem,
      truncate,
      heading,
      headingProps,
      theme,
      ...rest
    } = this.props;

    const classes = classNames('euiSideNav', className, {
      'euiSideNav-isOpenMobile': isOpenOnMobile,
    });
    const styles = euiSideNavMobileStyles(theme);

    const contentClasses = classNames('euiSideNav__content');
    const sideNavContentId = this.generateId('content');
    const mobileContentStyles = [
      styles.content.euiSideNav__mobileContent,
      isOpenOnMobile ? styles.content.open : styles.content.hidden,
    ];

    const hasMobileVersion = mobileBreakpoints && mobileBreakpoints.length > 0;
    const mobileToggleText = mobileTitle || heading;
    const mobileHeadingUnset = {
      marginBlockEnd: 0,
      label: 'mobile',
    };

    const headingId = headingProps?.id || this.generateId('heading');
    const headingScreenReaderOnly = !!headingProps?.screenReaderOnly;

    return (
      <>
        {hasMobileVersion && (
          <EuiShowFor sizes={mobileBreakpoints || 'none'}>
            <nav aria-labelledby={headingId} className={classes} {...rest}>
              <EuiSideNavHeading
                id={headingId}
                {...headingProps}
                screenReaderOnly={false}
                css={mobileHeadingUnset}
              >
                <EuiI18n
                  token="euiSideNav.mobileToggleAriaLabel"
                  default="Toggle navigation"
                >
                  {(mobileToggleAriaLabel: string) => (
                    <EuiButtonEmpty
                      className="euiSideNav__mobileToggle"
                      css={styles.euiSideNav__mobileToggle}
                      contentProps={{
                        className: 'euiSideNav__mobileToggleContent',
                        css: styles.euiSideNav__mobileToggleContent,
                      }}
                      onClick={toggleOpenOnMobile}
                      iconType="apps"
                      iconSide="right"
                      aria-controls={sideNavContentId}
                      aria-expanded={isOpenOnMobile}
                      aria-label={
                        !mobileToggleText || headingScreenReaderOnly
                          ? mobileToggleAriaLabel
                          : undefined
                      }
                    >
                      {!headingScreenReaderOnly && mobileToggleText}
                    </EuiButtonEmpty>
                  )}
                </EuiI18n>
              </EuiSideNavHeading>
              <div
                id={sideNavContentId}
                className={contentClasses}
                css={mobileContentStyles}
              >
                {this.renderTree(items)}
              </div>
            </nav>
          </EuiShowFor>
        )}
        <EuiHideFor sizes={mobileBreakpoints || 'none'}>
          <nav
            aria-labelledby={heading ? headingId : undefined}
            className={classes}
            {...rest}
          >
            {heading && (
              <EuiSideNavHeading id={headingId} {...headingProps}>
                {heading}
              </EuiSideNavHeading>
            )}
            <div id={sideNavContentId} className={contentClasses}>
              {this.renderTree(items)}
            </div>
          </nav>
        </EuiHideFor>
      </>
    );
  }