<div className="mobile-dropdown-container" ref={dropDownRef}>
              <div className="mobile-dropdown">
                <ul className="mobile-collapsed">
                  {Data.menuItems.map((menu, index) => (
                    <li
                      key={index}
                      className={
                        menu.subItems !== undefined
                          ? "mobile-nav-item has-dropdown"
                          : "mobile-nav-item"
                      }
                    >
                      <Link
                        to={menu.path}
                        onClick={changeDropdownState}
                        className="menu-item"
                        activeClassName="nav-link-active"
                      >
                        {menu.name}
                      </Link>
                      <ul>
                        {menu.subItems !== undefined &&
                          menu.subItems.map((subItems, index) => {
                            return (
                              <li key={index} className="mobile-nav-subitem">
                                {subItems.externalLink ? (
                                  <a
                                    href={subItems.path}
                                    target="_blank"
                                    onClick={() => {
                                      changeDropdownState();
                                      closeDropDown();
                                    }}
                                    className="mobile-sub-menu-item"
                                    rel="noreferrer"
                                  >
                                    {subItems.name}
                                  </a>
                                ) : (
                                  <Link
                                    to={subItems.path}
                                    onClick={() => {
                                      changeDropdownState();
                                      closeDropDown();
                                    }}
                                    className="mobile-sub-menu-item"
                                    activeClassName="nav-link-active"
                                  >
                                    {subItems.name}
                                  </Link>
                                )}
                              </li>
                            );
                          })}
                      </ul>
                    </li>
                  ))}
                </ul>
                {!userData && (
                  <div>
                    <ul>
                      <li>
                        <Button
                          id="get-started"
                          $secondary
                          className="banner-btn two"
                          title="Get Started"
                          $url="https://cloud.layer5.io/login"
                          $external={true}
                        />
                      </li>
                    </ul>
                  </div>
                )}
                <div>
                  <ul>
                    <li className="mobile-nav-item">
                      {/* <a href="https://calendar.google.com/calendar/appointments/schedules/AcZssZ3pmcApaDP4xd8hvG5fy8ylxuFxD3akIRc5vpWJ60q-HemQi80SFFAVftbiIsq9pgiA2o8yvU56?gv=true" className="menu-item">Book Demo</a> */}
                      <a href="https://play.meshery.io" className="menu-item">
                        Playground
                      </a>
                    </li>
                  </ul>
                </div>
              </div>
            </div>

                 {manu.actionItems.map((actionItem, i) => (
                    (actionItem.actionName === "Join the discussion" ?
                      <a key={i} href={actionItem.actionLink} target="_blank" className="action-link" rel="noreferrer">
                        <span className="readmore-btn">
                          {actionItem.actionName} <IoIosArrowRoundForward />
                        </span>
                      </a>
                      : (<Link key={i} to={actionItem.actionLink} partiallyActive={true} className="action-link">
                        <span className="readmore-btn">
                          {actionItem.actionName} <IoIosArrowRoundForward />
                        </span>
                      </Link>
                      )
                    )
                  ))}