Header.astro

---
import { library } from '@fortawesome/fontawesome-svg-core';
import { faBars } from '@fortawesome/free-solid-svg-icons';
import HeaderLink from './HeaderLink.astro';
import FAIcon from './FAIcon.astro';
import MultiLang from './MultiLang/index.astro';
import Navigation from './Navigation.astro';
import ElementHider from './ElementHider.astro';
import CollapsableToggle from './CollapsableToggle.astro';
import { SITE_TITLE, NAV_LINKS } from '../consts';

library.add(faBars);
---
<header>
  <nav>
    <div class="topbar">
      <h2><a href="/">{SITE_TITLE}</a></h2>
      <div class="internal-links -topbar -display" id="nav-links-topbar">
        <Navigation />
      </div>
      <CollapsableToggle
        contentSelector="#nav-links-dropdown"
        displayClass="-display"
        class="topbar-toggle-nav-button"
        title="Toggle Nav Links"
        aria-controls="nav-links-dropdown"
      >
        <FAIcon name="bars" />
      </CollapsableToggle>
    </div>
    <div class="internal-links -dropdown -display" id="nav-links-dropdown">
      <Navigation />
    </div>
    <ElementHider selector="#nav-links-dropdown" />
  </nav>
</header>
<style>
  header {
    margin: 0;
    padding: 0 1em;
    background-color: var(--topBarBackground);
    box-shadow: 0 2px 8px rgba(var(--black), 5%);
  }
  h2 {
    margin: 0;
    font-size: 1em;
    padding: 1em 0.5em;
  }
  h2 a {
    color: var(--text);
  }
  h2 a,
  h2 a.active {
    text-decoration: none;
  }
  nav {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
  }
  .topbar {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  .topbar-toggle-nav-button {
    display: none;
  }
  .internal-links.-topbar {
    display: flex;
  }
  .internal-links.-dropdown {
    display: none;
    margin-bottom: 1em;
  }
  @media (max-width: 40em) {
    .internal-links.-topbar, .internal-links.-dropdown {
      display: none;
    }
    .internal-links.-dropdown.-display {
      display: flex;
    }
    h2 {
      min-height: max-content;
      display: flex;
      flex-direction: column;
      justify-content: stretch;
    }
    .topbar-toggle-nav-button {
      display: block;
      padding: 0.25em 0.5em;
    }
    .internal-links {
      display: flex;
      flex-direction: column;
    }
  }
</style>