Update nav menu

js/main-menu-dropdown.js

@@ -0,0 +1,25 @@
+window.mainMenuDropdown = {
+  bind: function() {
+    $("[data-toggle='ecosystem-dropdown']").on("click", function() {
+      toggleDropdown($(this).attr("data-toggle"));
+    });
+
+    $("[data-toggle='resources-dropdown']").on("click", function() {
+      toggleDropdown($(this).attr("data-toggle"));
+    });
+
+    function toggleDropdown(menuToggle) {
+      var showMenuClass = "show-menu";
+      var menuClass = "." + menuToggle + "-menu";
+
+      if ($(menuClass).hasClass(showMenuClass)) {
+        $(menuClass).removeClass(showMenuClass);
+      } else {
+        $("[data-toggle=" + menuToggle + "].show-menu").removeClass(
+          showMenuClass
+        );
+        $(menuClass).addClass(showMenuClass);
+      }
+    }
+  }
+};

pytorch_sphinx_theme/layout.html

@@ -94,11 +94,25 @@
           </li>
 
           <li>
-            <a href="{{ theme_variables.external_urls['features'] }}">Features</a>
+            <div class="ecosystem-dropdown">
+              <a id="dropdownMenuButton" data-toggle="ecosystem-dropdown">
+                Ecosystem
+              </a>
+              <div class="ecosystem-dropdown-menu">
+                <a class="nav-dropdown-item" href="{{ theme_variables.external_urls['hub'] }}"">
+                  <span class=dropdown-title>Models (Beta)</span>
+                  <p>Discover, publish, and reuse pre-trained models</p>
+                </a>
+                <a class="nav-dropdown-item" href="{{ theme_variables.external_urls['ecosystem'] }}">
+                  <span class=dropdown-title>Tools & Libraries</span>
+                  <p>Explore the ecosystem of tools and libraries</p>
+                </a>
+              </div>
+            </div>
           </li>
 
           <li>
-            <a href="{{ theme_variables.external_urls['ecosystem'] }}">Ecosystem</a>
+            <a href="{{ theme_variables.external_urls['mobile'] }}">Mobile</a>
           </li>
 
           <li>
@@ -114,7 +128,21 @@
           </li>
 
           <li>
-            <a href="{{ theme_variables.external_urls['resources'] }}">Resources</a>
+            <div class="resources-dropdown">
+              <a id="resourcesDropdownButton" data-toggle="resources-dropdown">
+                Resources
+              </a>
+              <div class="resources-dropdown-menu">
+                <a class="nav-dropdown-item" href="{{ theme_variables.external_urls['resources'] }}"">
+                  <span class=dropdown-title>Developer Resources</span>
+                  <p>Find resources and get questions answered</p>
+                </a>
+                <a class="nav-dropdown-item" href="{{ theme_variables.external_urls['features'] }}">
+                  <span class=dropdown-title>About</span>
+                  <p>Learn about PyTorch’s features and capabilities</p>
+                </a>
+              </div>
+            </div>
           </li>
 
           <li>
@@ -418,15 +446,23 @@ <h2>Resources</h2>
       <div class="main-menu">
         <ul>
           <li>
-            <a href="#">Get Started</a>
+            <a href="{{ theme_variables.external_urls['get_started'] }}">Get Started</a>
+          </li>
+
+          <li>
+            <a href="{{ theme_variables.external_urls['features'] }}">Features</a>
+          </li>
+
+          <li>
+            <a href="{{ theme_variables.external_urls['ecosystem'] }}">Ecosystem</a>
           </li>
 
           <li>
-            <a href="#">Features</a>
+            <a href="{{ theme_variables.external_urls['mobile'] }}">Mobile</a>
           </li>
 
           <li>
-            <a href="#">Ecosystem</a>
+            <a href="{{ theme_variables.external_urls['hub'] }}">PyTorch Hub</a>
           </li>
 
           <li>
@@ -465,6 +501,7 @@ <h2>Resources</h2>
       sideMenus.bind();
       scrollToAnchor.bind();
       highlightNavigation.bind();
+      mainMenuDropdown.bind();
 
       // Add class to links that have code blocks, since we cannot create links in code blocks
       $("article.pytorch-article a span.pre").each(function(e) {