INFRA: add dropdown

Author: lwasser

_data/navigation.yml

@@ -1,12 +1,28 @@
 # main links
 main:
   - title: "Peer Review & Packages"
-    url: /python-packages/
+    url: 
+    sub-nav:
+      - title: "About peer review"
+        icon: "fas fa-fw fa-envelope-square"
+        url: "/about-peer-review/" 
+        url: "/python-packages/" 
+      - title: "Peer review guide"
+        url: "https://www.pyopensci.org/contributing-guide/"
+      - title: "Python package guide"
+        url: "https://www.pyopensci.org/python-package-guide/"
+  - title: "Our packages"
+    icon: "fas fa-fw fa-envelope-square"
   - title: "Blog"
     url: /blog/
-  - title: "Resources"
-    url: /resources/
-  - title: "Our Community"
-    url: /our-community/
+  # - title: "Resources"
+  #   url: /resources/
+  - title: "Community"
+    sub-nav:
+      - title: "Our Community"
+        url: "/our-community/" 
+      - title: "Governance"
+        icon: "fas fa-fw fa-envelope-square"
+        url: "https://www.pyopensci.org/governance/" 
   - title: "Contact"
     url: /get-involved-contact/

_includes/masthead.html

@@ -0,0 +1,84 @@
+{% capture logo_path %}{{ site.logo }}{% endcapture %}
+
+<div class="masthead">
+  <div class="masthead__inner-wrap">
+    <div class="masthead__menu">
+      <nav id="site-nav" class="nav__topbar" aria-label="Main Navigation">
+        <!-- More accessible as a screen reader will group the title and image in the same link -->
+        {% unless logo_path == empty %}
+        <a class="site-logo" href="{{ '/' | relative_url }}">
+          <img src="{{ logo_path | relative_url }}" alt="{{ site.masthead_title | default: site.title }}">
+          <span class="site-title">pyOpenSci</span>
+        </a>
+        {% endunless %}
+      
+      <ul class="nav__links">
+        {%- for alink in site.data.navigation.main -%}
+              {% if alink.sub-nav %}
+              <!-- If there is sub nav to display -->
+             <li class="dropdown">
+                <button class="dropbtn">{{ alink.title }} <i class="fas fa-caret-down"></i>
+                </button>
+                <ul class="dropdown-content">
+                  {% for subnav in alink.sub-nav %}
+                  <li>
+                    <a href="{{ subnav.url }}" class="masthead__menu-item hover-underline">{{ subnav.title }}</a>
+                  </li> 
+                  {% endfor %}
+                </ul>
+            </li>
+              {% else %}
+              <li>
+                <a href="{{ alink.url | relative_url }}" class="hover-underline">{{ alink.title }}</a>
+              </li>
+              {% endif %}
+        {% endfor %}
+      </ul> 
+        <!-- Burger button  - span class for screen readers-->
+        <button class="hamburger__btn-toggle" type="button" count="1">
+          <span class="visually-hidden">Toggle menu</span> <!--screen readers-->
+          <div class="burger__icon"></div>
+        </button>
+      </nav>
+      </div>
+    </div> 
+  </div> 
+</div> 
+        {% if site.search == true %}
+        <button class="search__toggle" type="button">
+          <span class="visually-hidden">{{ site.data.ui-text[site.locale].search_label | default: "Toggle search" }}</span>
+          <i class="fas fa-search"></i>
+        </button>
+        {% endif %}
+        <ul class="hidden-links hidden"></ul>
+      </nav>
+    </div>
+  </div>
+</div>
+
+<script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
+<script>
+  $(document).ready(function () {
+  $(".hamburger__btn-toggle").click(function (e) {
+    $(this).toggleClass("close");
+    e.preventDefault();
+    $(".nav__links").toggleClass("vertical");
+  });
+  
+  $(".dropdown").click(function (e) {
+    e.stopPropagation();
+    e.preventDefault();
+    // close when click outside
+    $(this).find(".dropdown-content").toggleClass("open");
+    $(this).siblings(".dropdown").find(".dropdown-content").removeClass("open");
+  });
+
+  // Close dropdown when u click outside of the nav ul
+  $(document).click(function (e) {
+    if (!e.target.closest("ul") && $(".dropdown-content").hasClass("open")) {
+      $(".dropdown-content").removeClass("open");
+    }
+  });
+});
+
+</script>