adding accordion and fixing mobile view of menu (#45)

Co-authored-by: Danita <[email protected]>

_config.yml

@@ -82,6 +82,17 @@ primary_navigation:
     url: /openacrs/
   - name: About OpenACRs
     url: /about/
+    children:
+      - name: Learning about OpenACRs
+        url: /about/
+      - name: How to create an OpenACR Report
+        url: /create/
+      - name: Frequently Asked Questions (FAQ)s
+        url: /faq/
+      - name: Roadmap
+        url: /roadmap/
+      - name: Resources
+        url: /resources/
 
 secondary_navigation:
   - name: "Is this just a VPAT?"

_includes/menu.html

@@ -23,8 +23,7 @@
         {% else %}
         {% assign nav_id = 'primary-nav-' | append: forloop.index %}
         <li class="usa-nav__primary-item">
-          <button class="usa-accordion__button usa-nav__link" aria-expanded="false"
-            aria-controls="{{ nav_id }}"><span>{{ nav_item.name | escape }}</span></button>
+          <button class="usa-accordion__button usa-nav__link" aria-expanded="false" aria-controls="{{ nav_id }}"><span>{{ nav_item.name | escape }}</span></button>
           <ul id="{{ nav_id }}" class="usa-nav__submenu">
             {% for subnav_item in nav_item.children %}
             <li class="usa-nav__submenu-item">

_includes/sidenav.html

@@ -5,21 +5,22 @@
 
 <aside class="tablet:grid-col-3 padding-bottom-4 display-none tablet:display-block">
   <nav>
+    {% assign basedir = page.url | remove_first: '/' | split: '/' | first | lstrip %}
     <ul class="usa-sidenav">
       <li class="usa-sidenav__item">
-        <a href="{{ site.baseurl }}/about/">Learning about OpenACRs</a>
+        <a class="{% if basedir == 'about' %} usa-current{% endif %}" href="{{ site.baseurl }}/about/">Learning about OpenACRs</a>
       </li>
       <li class="usa-sidenav__item">
-        <a href="{{ site.baseurl }}/create/">How to create an OpenACR Reports</a>
+        <a class="{% if basedir == 'create' %} usa-current{% endif %}"href="{{ site.baseurl }}/create/">How to create an OpenACR Reports</a>
       </li>
       <li class="usa-sidenav__item">
-        <a href="{{ site.baseurl }}/faq/">Frequently Asked Questions (FAQ)s</a>
+        <a class="{% if basedir == 'faq' %} usa-current{% endif %}"href="{{ site.baseurl }}/faq/">Frequently Asked Questions (FAQs)</a>
       </li>
       <li class="usa-sidenav__item">
-        <a href="{{ site.baseurl }}/roadmap/">Roadmap</a>
+        <a class="{% if basedir == 'roadmap' %} usa-current{% endif %}"href="{{ site.baseurl }}/roadmap/">Roadmap</a>
       </li>
       <li class="usa-sidenav__item">
-        <a href="{{ site.baseurl }}/resources/">Resources</a>
+        <a class="{% if basedir == 'resources' %} usa-current{% endif %}"href="{{ site.baseurl }}/resources/">Resources</a>
       </li>
 
     </ul>

_layouts/page.html

@@ -12,6 +12,7 @@
       {% if page.sidenav == true %}
       {% include sidenav.html %}
       {% endif %}
+
       <main class="tablet:grid-col-9">
         <div class="usa-layout-docs__main usa-prose">
             {{ content }}