work.suroh.tk/_includes/components/nav-primary.webc

<nav id="primary">
  <nav-link link="/" data-name="<~"><~</nav-link>
  <div class="pagelinks">
    <template webc:for="(c,v) in categories" webc:nokeep>
      <nav-link webc:if="v.page" :link="v.page.url" :data-name="v.data.title"></nav-link>
      <nav-link webc:else :category="c" :data-name="c"></nav-link>
    </template>
  </div>

  <div class="controls">
    <button class="audioToggle"></button>
    <theme-switcher></theme-switcher>
  </div>
</nav>

<nav id="sub" slot="subnav">
  <template webc:for="(c, v) in categories" webc:nokeep>
    <ul webc:if="v.length > 0" :data-name="c">
      <li webc:for="p of v">
        <a :href="p.url" @text="p.data.title || p.fileSlug"></a>
      </li>
    </ul>
  </template>
</nav>

<section id="menuItem" style="">
    <h1 id="menuItem"></h1>
</section>

<nav id="toTop">
  <span>top</span>
</nav>

<script src="nav-primary.js" type="module"></script>

<style webc:scoped>
/*
*
* switch element taken from Andy Bell's article
* which can be found here:
* https://piccalil.li/blog/a-highly-configurable-switch-component-using-modern-css/
*/
/* => HOST */
:host {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1em 0.25em;
  margin-block: 2em 0.5em;
  margin-inline: var(--page-margin-inline);
}

@media (max-width: 780px) {
  :host {
    margin-block: 1em 0.5em;
    margin-inline: calc(var(--page-margin-inline) * 0.5);
  }
}

/* => CONTAINER */
nav {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
  font-size: 1.5em;
}

nav-link[data-name="<~"] {
  grid-column: 1 / span 1
}

.pagelinks {
  display: flex;
  gap: 0.25em;
}

/* => CONTROLS */
.controls {
  display: flex;
  gap: 0.5em;
}

/* => AUDIO TOGGLE */
.audioToggle {
  background: none;
  border: none;
  margin-inline-start: auto;
  transition: color ease-in-out 0.1s;
}

.audioToggle:hover {
  color: var(--primary-colour);
  cursor: pointer;
  transition: color ease-in-out 0.1s;
}

.audioToggle::after {
  content: '🔇'
}

.audioToggle.active::after {
  content: '🔉'
}

/* => SUb NAV */
#sub {
  display: grid;
  grid-template: subgrid / 1fr;
  grid-column: 2 / -1;
  margin: 0;
}

@media (max-width: 780px) {
  #sub {
    grid-column: 1 / -1;
    font-size: 1.25em;
  }
}

#sub > ul {
  grid-row: 1 / span 1;
  grid-column: 1 / span 1;
  max-height: 0px;
  overflow: hidden;
  transition: max-height 0.5s cubic-bezier(.22,.61,.36,1);
}

ul.active {
  max-height: 50vh !important;
}

/* => POPUP TITLE */
#menuItem {
  position: fixed;
  bottom: 0;
  left: 0;
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 0px;
  overflow: visible;
  z-index: 100;
  mix-blend-mode: difference;
}

#menuItem h1 {
  position: absolute;
  line-height: inherit;
  bottom: -500px;
  margin: 0;
  padding: 0;
  font-size: 33vw;
  opacity: 0;
  color: var(--neutral-100);
  transform: translateY(100px);
  transform-origin: bottom left;
  transition: opacity ease-in-out 0.1s, transform ease-in-out 0.1s;
}

#menuItem h1.active {
  opacity: 1 !important;
  transform: translateY(-600px) !important;
}
</style>