react-icons/go#GoChevronDown JavaScript Examples

render() {
    const menuGetstart = this.props.item.customFields.secondaryButton
    const primaryButton = this.props.item.customFields.primaryButton
    const contactButton = this.props.item.customFields.contactus
    const marketingBannerButton = this.props.item.customFields
      .marketingBannerButton
    const isOpenMenuText = "is-open-menu"

    const renderMenu2 = menu => {

      const levelOneList = menu.map(menuItem => {
        const subMenu = menuItem?.subNavigation
        const url = menuItem?.customFields?.uRL

        /* active parent menu when sub menu is active */
        let isSubMenuActive = false
        subMenu.find(item => {
          if (item.id === this.state.activeMenu) {
            isSubMenuActive = true
          }
        })
        const isActive =
          this.state.activeMenu === menuItem.id || isSubMenuActive
            ? "active"
            : ""
        return (
          <li
            key={menuItem.id}
            className={`d-xl-flex align-items-center ${isActive} ${
              this.state.menuLv2Opening === menuItem.id ? "is-open-child" : ""
            } `}
            onClick={
              !subMenu?.length
                ? this._handleActiveMenu.bind(this, menuItem.id)
                : () => {}
            }
            data-page-id={menuItem.id}
          >
            <Link
              to={url.href}
              target={url.target}
              onClick={subMenu?.length ? e => this.openMenuLv1(e) : () => {}}
            >
              {menuItem.customFields?.title || url.text}
            </Link>
            {/* {url.href.indexOf("://") !== -1 ? (
              <a
                href={url.href}
                target={url.target}
                onClick={subMenu?.length ? e => this.openMenuLv1(e) : () => {}}
              >
                {menuItem.customFields?.title || url.text}
              </a>
            ) : (
              <Link
                to={url.href}
                target={url.target}
                onClick={subMenu?.length ? e => this.openMenuLv1(e) : () => {}}
              >
                {menuItem.customFields?.title || url.text}
              </Link>
            )} */}

            {/* sub navigation */}
            {subMenu.length ? renderSubMenu(menuItem) : ""}
            {subMenu.length ? <GoChevronDown className="dropdown-icon" /> : ""}
          </li>
        )
      })

      /* search layout */
      const btnMenu = (
        <li
          className="d-xl-flex align-items-center box-search-header"
          key="btnMenu"
        >
          {/* <div className="group-search">
					<button onClick={this.showSearch} className="open-search link-search d-flex align-items-center justify-content-center ">
						<Lazyload offset={Helpers.lazyOffset}><img src={'/images/search.svg'} className="lazy " width="25" height="25" alt="search" /></Lazyload>
					</button>
					<form onSubmit={event => {
						event.preventDefault()
						const valSearch = document.querySelectorAll('#search-page-header')[0]
						if (valSearch && valSearch.value.trim().length > 0) {
							navigate(`/search?s=${valSearch.value}`)
						} else {
							valSearch.value = ''
						}
					}}>
						<label htmlFor="search-page-header" className="sr-only">Search...</label>
						<input name="s" id="search-page-header" type="text" className="aniamtion-input " placeholder="Search.."></input>
						<span className="bind-text"></span>
						<button className="submit-search d-flex align-items-center justify-content-center" type="submit">
							<Lazyload offset={Helpers.lazyOffset}><img src={'/images/search.svg'} className="lazy " alt="search" /></Lazyload>
						</button>
					</form>
				</div> */}
          <a
            target={menuGetstart.target}
            href={menuGetstart.href}
            className="text-decoration-none btn btn-outline-primary pin btn-menu btn-pin "
          >
            {menuGetstart.text}
          </a>
          {contactButton?.href && contactButton?.text && (
            <a
              target={contactButton.target}
              href={contactButton.href}
              className="text-decoration-none btn btn-primary btn-menu btn-menu-v2 d-sm-none d-xl-block"
            >
              {contactButton.text}
            </a>
          )}
        </li>
      )

      levelOneList.push(btnMenu)
      return levelOneList
    }

    const renderSubMenu = menuItem => {
      const subMenu = menuItem?.subNavigation
      const megaContent = menuItem?.megaContent
      const megaTitle = menuItem?.customFields?.megaTitle
      const linkOrSpotlight = menuItem?.customFields?.linkorSpotlight
      const hasMegaMenuContent = megaContent?.length

      return (
        <>
          <div
            className="nav-item-arrows arrows-lv1 d-xl-none"
            onClick={e => this.clickNavArrowLv1(e)}
          >
            <i className="icomoon icon-down-menu" aria-hidden="true"></i>
          </div>
          <div
            className={`dropdown-menu main-menu-dropdown ${
              hasMegaMenuContent ? "has-mega-content" : ""
            }`}
          >
            <div className={`dr-navi-col`}>
              <ul className="list-inline">
                {subMenu.map((subMenuItem, index) => {
                  const url = subMenuItem.customFields?.uRL
                  const isActive =
                    this.state.activeMenu === subMenuItem.id ? "active" : ""
                  return (
                    <li
                      key={`child-${index}`}
                      className={`d-xl-flex align-items-center ${isActive}`}
                    >
                      {url?.href.indexOf("://") !== -1 ? (
                        <a href={url?.href} target={url?.target}>
                          {url?.text || subMenuItem.customFields?.title}
                        </a>
                      ) : (
                        <Link to={url?.href} target={url?.target}>
                          {url?.text || subMenuItem.customFields?.title}
                        </Link>
                      )}
                    </li>
                  )
                })}
              </ul>
            </div>
            {hasMegaMenuContent ? (
              <div className="dr-navi-col">
                {megaMenuContent(megaContent, megaTitle, linkOrSpotlight)}
              </div>
            ) : (
              ""
            )}
          </div>
        </>
      )
    }

    const megaMenuContent = (megaContent, megaTitle, linkOrSpotlight) => {
      const isSpotlight = linkOrSpotlight === "Spotlight" // Spotlight - Link

      const renderMegaContent = megaContent.map((content, index) => {
        const customFields = content.customFields
        const url = customFields?.uRL
        const image = { ...customFields?.imageorIcon, alt: customFields?.title }
        return (
          <div
            key={"mega-" + index}
            className={`mega-content-item ps-rv last-mb-none`}
          >
            {url && (
              <Link to={url?.href} target={url?.target} className="ps-as" />
            )}
            {/* is Spotlight Type */}
            {isSpotlight && (
              <>
                {image && (
                  <div className="spotlight-thumb">
                    <Lazyload offset={Helpers.lazyOffset}>
                      <img
                        src={image.url + "?w=236"}
                        className="lazy"
                        alt={customFields?.title || customFields?.description}
                      />
                    </Lazyload>
                  </div>
                )}
                {customFields?.title && <h6>{customFields?.title}</h6>}
              </>
            )}
            {/* is Link Type */}
            {!isSpotlight && (
              <>
                {image && (
                  <div className="mega-link-logo">
                    <Lazyload offset={Helpers.lazyOffset}>
                      <img
                        src={image.url}
                        className="lazy"
                        alt={customFields?.title || customFields?.description}
                      />
                    </Lazyload>
                  </div>
                )}
                {(customFields?.title || customFields?.description) && (
                  <div className="flex-grow-1 last-mb-none">
                    {customFields?.title && <h6>{customFields?.title}</h6>}
                    {customFields?.description && (
                      <p>{customFields?.description}</p>
                    )}
                  </div>
                )}
              </>
            )}
          </div>
        )
      })

      return (
        <div
          className={`mega-content last-mb-none ${
            isSpotlight ? "is-spotlight" : "is-link"
          }`}
        >
          {megaTitle && <h5>{megaTitle}</h5>}
          {renderMegaContent}
        </div>
      )
    }

    const item = this.props.item.customFields
    const classMainMenu = `navbar-collapse main-menu menu-header-right ${
      this.state.openMenu === true ? isOpenMenuText : ""
    }`
    return (
      <React.Fragment>
        <header
          id="header"
          className={`module header ${
            this.state.sticky === true ? "pin-header" : "unpin-header"
          }  ${this.state.openMenu === true ? isOpenMenuText : ""} ${
            this.state.pinHeader === true ? "pos-fixed" : ""
          }`}
          ref={reference => (this.header = reference)}
        >
          {item.hideMarketingBanner !== "true" &&
            item.marketingBanner &&
            item.marketingBanner.length > 0 &&
            this.state.webinar !== "true" && (
              <div
                className={`box-message text-white d-none d-xl-flex align-items-center`}
                ref={this.boxMessage}
              >
                <div className="container last-mb-none">
                  {/* <div className="close-message d-none" onClick={this.hiddenMessage}></div> */}
                  <div className="row">
                    <div className="col-7 col-xl-8">
                      <div
                        className="last-mb-none"
                        dangerouslySetInnerHTML={renderHTML(
                          item.marketingBanner
                        )}
                      />
                    </div>
                    <div className="col-5 col-xl-4 text-right d-flex align-items-center justify-content-end">
                      <a
                        className="d-inline-block flash-btn"
                        href={primaryButton.href}
                        target={primaryButton.target}
                      >
                        {primaryButton.text}
                      </a>
                      <a
                        className="d-inline-block flash-btn"
                        href={marketingBannerButton?.href}
                        target={marketingBannerButton?.target}
                      >
                        {marketingBannerButton?.text}
                      </a>
                    </div>
                  </div>
                </div>
              </div>
            )}
          <nav className="container navbar navbar-expand-xl">
            <div className="container header-mobile mx-auto row align-items-center justify-content-between flex-wrap">
              {item.logo ? (
                <div className="col-9 col-md-6 col-xl-12">
                  <Link
                    to="/"
                    id="header-logo"
                    title={item.logo.label}
                    className="navbar-brand header-logo w-100"
                  >
                    <img
                      src={item.stickyLogo.url}
                      alt={item.logo.label}
                      width="158"
                      height="40"
                      className="w-100"
                      loading="lazy"
                    />
                  </Link>
                </div>
              ) : (
                ""
              )}
              <div className="col-3 col-md-6 text-right d-xl-none d-flex justify-content-end align-items-center">
                {contactButton?.href && contactButton?.text && (
                  <a
                    target={contactButton.target}
                    href={contactButton.href}
                    className="text-decoration-none btn btn-primary btn-menu btn-menu-v2 d-none d-md-block"
                  >
                    {contactButton.text}
                  </a>
                )}
                <Hamburger showMenuMobile={() => this.showMenuMobile()} />
              </div>
            </div>
            <div className={classMainMenu} id="main-menu" data-module="menu">
              <div className={`container`}>
                <ul className="main-menu-ul navbar-nav mx-auto justify-content-end list-inline ">
                  {renderMenu2(this.props.menu2)}
                </ul>

                <div className="box-mess-mb ps-rv text-white text-center d-xl-none">
                  <a
                    className="d-block flash-btn"
                    style={{ marginBottom: 5 }}
                    href={marketingBannerButton?.href}
                    target={marketingBannerButton?.target}
                  >
                    {marketingBannerButton?.text}
                  </a>
                  <a
                    className="d-block flash-btn"
                    href={primaryButton?.href}
                    target={primaryButton?.target}
                  >
                    {primaryButton?.text}
                  </a>
                </div>
              </div>
            </div>
          </nav>
        </header>
      </React.Fragment>
    )
  }