firq-dev-website/src/components/navbar.astro

---
import { Image } from 'astro:assets';
import logo from '../assets/logo.svg'
import hamburger from 'iconoir/icons/menu.svg'
const hamburger_src_url = `url("${hamburger.src}")`;
---

<header>
  <a href="/" rel="noopener noreferrer" aria-label="Home">
    <Image src={logo} alt="Website Logo"/>
  </a>
  <ul class="desktop">
    <slot />
  </ul>
  <button class="mobile" aria-label="Navigation Button" tabindex="0" onclick="this.focus()">
    <ul>
      <slot />
    </ul>
    <div class="placeholder"></div>
    <div class="icon"></div>
  </button>
</header>

<style define:vars={{ hamburger_src_url }}>
  header {
    z-index: 1000;
    position: sticky;
    top: 0px;
    background-color: var(--c-darkgray);
    display: flex;
    height: auto;
    width: 100%;
    align-items: flex-start;
    line-height: 1.5em;
  }
  header > a {
    padding-left: 16px;
    padding-top: 8px;
    display: block;
    height: 48px;
    width: 48px;
  }
  a > img {
    height: 100%;
    width: 100%;
    object-fit: contain;
  }
  .desktop {
    align-items: center;
    justify-content: space-around;
    display: none;
    flex-wrap: wrap;
    flex-direction: row;
    height: 64px;
    width: 100%;
    list-style-type: none;
    row-gap: 0.5em;
    column-gap: 0.5ch;
    margin: 0px;
    line-height: 1.5em;
  }
  .mobile > ul {
    background-color: var(--c-darkgray);
    align-items: center;
    flex-wrap: wrap;
    flex-direction: column;
    display: flex;
    width: 100%;
    list-style-type: none;
    line-height: 3em;
  }

  .placeholder {
    display: flex;
    width: 100%;
  }

  .mobile {
    display: flex;
    background-color: var(--c-darkgray);
    border: 0px;
    width: 100%;
    height: 64px;
  }

  .mobile > ul {
    display: none;
    padding: 0px;
  }

  .mobile:focus-within > ul {
    display: flex;
  }

  .mobile:focus-within > .placeholder {
    display: none;
  }

  .mobile:focus-within {
    justify-content: top;
    height: auto;
  }
  header:focus-within > a {
    display: flex;
    justify-self: top;
  }

  .icon {
    mask: var(--hamburger_src_url) no-repeat center;
    background-color: white;
    width: 2em;
    height: 2em;
    position: static;
    align-self: flex-start;
    padding-right: 1em;
    padding-top: 2.5em;
  }

  @media (min-width: 1140px) {
    .mobile {
      display: none;
    }
    .desktop {
      display: flex;
    }

    header {
      height: 64px;
      align-items: center;
    }

    header > a {
      padding-top: 0px;
    }
  }
</style>