Major redesign and rewrite

src/components/navbar.astro

@@ -1,137 +0,0 @@
----
-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" role="link">
-    <Image src={logo} alt=""/>
-    <span class="visually-hidden">Firq Logo</span>
-  </a>
-  <ul class="desktop">
-    <slot name="desktop"/>
-  </ul>
-  <button class="mobile" aria-label="Navigation Button" tabindex="0" onclick="this.focus()" role="button">
-    <ul>
-      <slot name="mobile"/>
-    </ul>
-    <div class="placeholder"></div>
-    <div class="hamburger-menu" role="navigation"></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 {
-    margin-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;
-  }
-
-  .hamburger-menu {
-    mask: var(--hamburger_src_url) no-repeat center;
-    background-color: white;
-    width: 2rem;
-    height: 2rem;
-    position: static;
-    align-self: flex-start;
-    margin-right: 1rem;
-    margin-top: 1rem;
-  }
-
-  @media (min-width: 1140px) {
-    .mobile {
-      display: none;
-    }
-    .desktop {
-      display: flex;
-    }
-
-    header {
-      height: 64px;
-      align-items: center;
-    }
-
-    header > a {
-      padding-top: 0px;
-    }
-  }
-</style>