mobile_menu.html

<div class="mobile-main-menu">
  <div class="container-fluid">
    <div class="container">
      <div class="mobile-main-menu-header-container">
        <a class="header-logo" href="{{ site.url }}{{ site.baseurl }}" aria-label="PyTorch"></a>
        <a class="main-menu-close-button" href="#" data-behavior="close-mobile-menu"></a>
      </div>
    </div>
  </div>

  <div class="mobile-main-menu-links-container">

    <div class="main-menu">
      <ul>
        <li class="navSearchWrapper reactNavSearchWrapper tabletSearchWrapper" key="search">
          <div class="mobile-search-border">
            <input
              id="mobile-search-input"
              type="text"
              title="Search"
            />
            <div id="mobile-search-icon"></div>
          </div>
        </li>

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

        <li class="{% if current[1] == 'ecosystem' %}active{% endif %}">
          <a href="{{ site.baseurl }}/ecosystem">Ecosystem</a>
        </li>

        <li class="{% if current[1] == 'mobile' %}active{% endif %}">
          <a href="{{ site.baseurl }}/mobile">Mobile</a>
        </li>

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

        <li>
          <a href="{{ site.external_urls.tutorials }}">Tutorials</a>
        </li>

        <li>
          <a href="{{ site.baseurl }}/docs">Docs</a>
        </li>

        <li class="resources-mobile-menu-title">
          Docs
        </li>

        <ul class="resources-mobile-menu-items">
          <li class="{% if current[1] == 'docs' %}active{% endif %}">
            <a href="{{ site.baseurl }}/docs">PyTorch</a>
          </li>

          <li class="{% if current[1] == 'audio' %}active{% endif %}">
            <a href="{{ site.baseurl }}/audio">torchaudio</a>
          </li>

          <li class="{% if current[1] == 'torchtext' %}active{% endif %}">
            <a href="{{ site.baseurl }}/text">torchtext</a>
          </li>

          <li class="{% if current[1] == 'torchvision' %}active{% endif %}">
            <a href="{{ site.baseurl }}/docs/stable/torchvision">torchvision</a>
          </li>

          <li class="{% if current[1] == 'hub' %}active{% endif %}">
            <a href="{{ site.baseurl }}/elastic">TorchElastic</a>
          </li>

          <li class="{% if current[1] == 'serve' %}active{% endif %}">
            <a href="{{ site.baseurl }}/serve">TorchServe</a>
          </li>

          <li class="{% if current[1] == 'hub' %}active{% endif %}">
            <a href="{{ site.baseurl }}/xla/release/1.6/index.html">PyTorch on XLA Devices</a>
          </li>
        </ul>

        <li class="resources-mobile-menu-title">
          Resources
        </li>

        <ul class="resources-mobile-menu-items">
          <li class="{% if current[1] == 'features' %}active{% endif %}">
            <a href="{{ site.baseurl }}/features">About</a>
          </li>

          <li>
            <a href="{{ site.baseurl }}/#community-module">Community</a>
          </li>

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

          <li>
            <a href="{{ site.external_urls.discuss }}">Forum</a>
          </li>

          <li class="{% if current[1] == 'hub' %}active{% endif %}">
            <a href="{{ site.baseurl }}/hub">Models (Beta)</a>
          </li>

        </ul>

        <li id="github-mobile-menu-link">
          <a href="{{ site.external_urls.github }}">GitHub</a>
        </li>
      </ul>
    </div>

  </div>
</div>