INFRA: Add dropdown menus to site

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/"
+      - title: "Peer review guide"
+        url: "https://www.pyopensci.org/peer-review-guide/"
+      - title: "Python package guide"
+        url: "https://www.pyopensci.org/python-package-guide/"
+  - title: "Our packages"
+    icon: "fas fa-fw fa-envelope-square"
+    url: "/python-packages/"
   - 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/footer.html

@@ -0,0 +1,24 @@
+<div class="page__footer-follow">
+    <ul class="social-icons">
+      {% if site.data.ui-text[site.locale].follow_label %}
+        <li><strong>{{ site.data.ui-text[site.locale].follow_label }}</strong></li>
+      {% endif %}
+  
+      {% if site.footer.links %}
+        {% for link in site.footer.links %}
+          {% if link.label and link.url %}
+            <li><a href="{{ link.url }}" rel="nofollow noopener noreferrer"><i class="{{ link.icon | default: 'fas fa-link' }}" aria-hidden="true"></i> {{ link.label }}</a></li>
+          {% endif %}
+        {% endfor %}
+      {% endif %}
+  
+      {% unless site.atom_feed.hide %}
+        <li><a href="{% if site.atom_feed.path %}{{ site.atom_feed.path }}{% else %}{{ '/feed.xml' | relative_url }}{% endif %}"><i class="fas fa-fw fa-rss-square" aria-hidden="true"></i> {{ site.data.ui-text[site.locale].feed_label | default: "Feed" }}</a></li>
+      {% endunless %}
+    </ul>
+  </div>
+  pyOpenSci is a fiscally sponsored project of Community Initiatives
+
+  <div class="page__footer-copyright">&copy; {{ site.time | date: '%Y' }} {{ site.name | default: site.title }}</div>
+  <script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
+  <script src="/assets/js/dropdown.js"></script>

_includes/masthead.html

@@ -0,0 +1,58 @@
+{% 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="Top Bar">
+        <!-- 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="Welcome to the pyOpenSci website. This is the pyOpenSci logo.">
+          <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" tabindex="0" aria-expanded="false">{{ 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 %}
+        <li>
+          
+      </li>
+      </ul> 
+      <!--
+      {% 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>
+        <!-- Burger button  - span class for screen readers-->
+        <button class="hamburger__btn-toggle" type="button" count="1" aria-expanded="false">
+          <span class="visually-hidden">Toggle top navigation menu</span> <!--screen readers-->
+          <div class="burger__icon"></div>
+        </button>
+      </nav>
+      </div>
+    </div> 
+  </div>