feat(nav): close on link click

_includes/app/head.html

@@ -9,5 +9,8 @@
 <script defer type="text/javascript" src="assets/js/donation-modal.js"></script>
 
 <!-- Audio -->
-<script defer type="text/javascript" src="assets/js/audio.js?cb={{ site.time }}"></script>
-<script defer type="text/javascript" src="assets/js/show-audio.js?cb={{ site.time }}"></script>
+<script defer type="text/javascript" src="assets/js/audio.js"></script>
+<script defer type="text/javascript" src="assets/js/show-audio.js"></script>
+
+<!-- Menu -->
+<script defer type="text/javascript" src="assets/js/menu.js?cb={{ site.time }}"></script>

_includes/components/menu-item.html

@@ -1,19 +1,22 @@
 <li class="menu-item">
   {%- if include.icon -%}
-    <a 
+    <a
       href="{{ include.href }}"
-      class="menu-link icon {{ include.color }}" 
+      class="menu-link icon {{ include.color }}"
       {%- if include.target -%}
         target="{{ include-target }}"
       {%- endif -%}
-      {%- if include.campaign-id -%}  
+      {%- if include.campaign-id -%}
         data-donate-campaign-id="{{ include.campaign-id }}"
-      {%- endif -%}  
-    >  
+      {%- endif -%}
+    >
       <span class="material-icons" aria-label="{{ include.aria-label }}">{{ include.icon }}</span>
       <span>{{ include.label }}</span>
     </a>
-  {%- else -%} 
-    <a href="{{ include.href }}" class="menu-link {{ include.color }}" >{{ include.label }}</a>
+  {%- else -%}
+    <a
+      href="{{ include.href }}"
+      class="menu-link {{ include.color }}"
+    >{{ include.label }}</a>
   {%- endif -%}
 </li>

assets/js/menu.js

@@ -0,0 +1,9 @@
+((doc) => {
+  const drawer = doc.getElementById('navDrawerPopover');
+
+  drawer.addEventListener('click', (evt) => {
+    const anchor = evt.target.closest('a');
+
+    if (anchor) drawer.hidePopover();
+  });
+})(document);