Update header mobile bugs (#53)

# Problem

- If the content was spilling over the viewport width, the menu would be
full right instead of full left
- The mobile nav menu would stay open on click if it was to an anchor on
the same page

src/lib/features/NavMenuMobile.svelte

@@ -8,7 +8,7 @@
   export let menuItems: MenuItem[] = [];
   export let toggleIdentifier: string = 'mobile-menu-toggle';
 
-  // isOpen for updating Aria state only
+  // isOpen is bound to the checkbox state
   let isOpen: boolean = false;
 </script>
 
@@ -17,7 +17,7 @@
   classes="cursor-pointer text-navy peer-checked:text-white peer-checked:hover:text-teal hover:text-teal flex self-center lg:hidden"
 />
 <div
-  class="z-1 fixed right-0 top-0 z-10 flex h-0 w-[100vw] flex-col justify-between gap-f24 overflow-y-scroll bg-navy px-[12%] transition-[height] duration-[1s] peer-checked:h-[100vh] lg:hidden"
+  class="z-1 fixed left-0 top-0 z-10 flex h-0 w-[100vw] flex-col justify-between gap-f24 overflow-y-scroll bg-navy px-[12%] transition-[height] duration-[1s] peer-checked:h-[100vh] lg:hidden"
   aria-expanded={isOpen}
 >
   <nav id="mobile-navigation" aria-label="Main" class="mb-f20 mt-[85px] flex flex-col gap-f24 text-white">
@@ -35,8 +35,11 @@
         <a
           href={item.href}
           target={item.isExternal ? '_blank' : '_self'}
-          class={`h4 underline-on-hover font-bold after:bg-current`}>{item.label}</a
+          class={`h4 underline-on-hover font-bold after:bg-current`}
+          on:click={() => (item.isExternal ? null : (isOpen = false))}
         >
+          {item.label}
+        </a>
       {/if}
     {/each}
   </nav>