optimize header component for static content / Light DOM

[thescientist13]

Summary

Coming out of #26 / #44 we started with instrumenting the header component to render out purely into (Declarative) Shadow DOM. Thinking about it more, since only the mobile menu tile icon is interactive, we can probably componentize just that part, and leave the bulk of the header to just be rendered out as static (Light DOM) HTML

Details

So basically:

1. the overlay / mobile menu nav should be a component, that can render into a Declarative Shadow Root
2. From there, we would only need to ship the mobile menu component JS

[thescientist13]

Wow, totally realized we should be able to replace pretty much everything in the header with a Popover! 🍿

We can just apply the popover attribute to the mobile nav element using auto so then we can have our close <button>

<nav class="nav-bar-mobile" id="my-popover" popover="manual">
  <button class="close-button" popovertarget="my-popover" popovertargetaction="hide">
    &times;
  </button>
  
  <ul class="mobile-menu-items">
    <!-- ... -->
</nav>

And then wire it up to our mobile menu icon

<button class="mobile-menu" popovertarget="my-popover">
  ${mobileMenuIcon}
</button>

We can then style the popover ourselves to reproduce our overlay.

In addition, we should really be able refactor all the JS resize logic away with just media queries right? Or at the very least, with this we should be able to.

Maybe we could re-use the HTML for both menus too (or just make the nav a template)? 🤔

---

We should do this after #64 lands (and #67 + #61), and then as a by-product, should also resolve these issues in one fell swoop

• mobile menu is visible by default at mobile breakpoints #54
• social icons in header breaking out of the container on lower breakpoints #55