main_menu.html

<div class="main-menu">
  <ul>
    <li class="main-menu-item {% if current[1] == 'get-started' %}active{% endif %}">
      <a href="{{ site.baseurl }}/get-started">Get Started</a>
    </li>

    <li class="main-menu-item {% if current[1] == 'features' %}active{% endif %}">
      <a href="{{ site.baseurl }}/features">Features</a>
    </li>

    <li class="main-menu-item {% if current[1] == 'ecosystem' or current[1] == 'hub' %}active{% endif %}">

      <div class="ecosystem-dropdown">
        <a id="dropdownMenuButton" data-toggle="ecosystem-dropdown">
          Ecosystem
        </a>
        <div class="ecosystem-dropdown-menu">
          <a class="ecosystem-dropdown-item" href="{{ site.baseurl }}/hub">
            <span class=dropdown-title>Models (Beta)</span>
            <p>Discover, publish, and reuse pre-trained models</p>
          </a>
          <a class="ecosystem-dropdown-item" href="{{ site.baseurl }}/ecosystem">
            <span class=dropdown-title>Tools & Libraries</span>
            <p>Explore the ecosystem of tools and libraries</p>
          </a>
          <a class="ecosystem-dropdown-item" href="{{ site.baseurl }}/ecosystem/join">
            <span class=dropdown-title>Join</span>
            <p>Submit your project and join the community</p>
          </a>
        </div>
      </div>
    </li>

    <li class="main-menu-item {% if current[1] == 'blog' %}active{% endif %}">
      <a href="{{ site.baseurl }}/blog">Blog</a>
    </li>

    <li class="main-menu-item">
      <a href="{{ site.external_urls.tutorials }}">Tutorials</a>
    </li>

    <li class="main-menu-item">
      <a href="{{ site.baseurl }}/docs">Docs</a>
    </li>

    <li class="main-menu-item {% if current[1] == 'resources' %}active{% endif %}">
      <a href="{{ site.baseurl }}/resources">Resources</a>
    </li>

    <li class="main-menu-item">
      <a href="{{ site.external_urls.github }}">GitHub</a>
    </li>

    <li class="navSearchWrapper reactNavSearchWrapper" key="search">
      <div class="search-border">
        <div id="search-icon"></div>
        <input
          id="search-input"
          type="text"
          title="Search"
        />
        <div id="close-search">X</div>
      </div>
    </li>
  </ul>
</div>

<script>
  var menu = ".ecosystem-dropdown-menu";
  var showMenuClass = "show-menu";

$("[data-toggle='ecosystem-dropdown']").on("click", function(e) {
  if ($(menu).hasClass(showMenuClass)) {
    $(menu).removeClass(showMenuClass);
  } else {
    $("[data-toggle='ecosystem-dropdown'].show-menu").removeClass(showMenuClass);
    $(menu).addClass(showMenuClass);
  }
});
</script>