<div class="navbar">
  <input name="slideout" id="overlay" class="overlay" type="radio" checked>
  <div class="hamburger">
    <label class="hamburg-box" for="f-menu">
      <p><%- __('menu') %></p>
      <svg class="f-menu" role="img" aria-labelledby="f-nav">
        <title id="f-nav">menu icon</title>
        <use xlink:href="#icon-menu">
      </svg>
      <svg id="menuClose" class="f-icon" role="img" aria-labelledby="f-close">
        <title id="f-close">close icon</title>
        <use xlink:href="#icon-close">
      </svg>
    </label>
  </div>
  <input name="slideout" id="f-menu" class="control" type="radio">
  <ul class="nav slideout">
    <label for="overlay"></label>
    <li><a href="/en/fediverse"><svg class="f-icon"><use xlink:href="#icon-star"></use></svg> <span>Fediverse</span></a></li>
    <li><a href="/en/miscellaneous"><svg class="f-icon"><use xlink:href="#icon-star"></use></svg> <span><%- __('more') %></span></a></li>
    <li><a href="/en/portal/servers"><svg class="f-icon"><use xlink:href="#icon-star"></use></svg> <span><%- __('portal') %></span></a></li>
    <li><a href="/en/chronicles"><svg class="f-icon"><use xlink:href="#icon-star"></use></svg> <span><%- __('chronicles') %></span></a></li>
    <li><a href="/en/crystalball"><svg class="f-icon"><use xlink:href="#icon-star"></use></svg> <span><%- __('magic') %></span></a></li>
    <li><a href="https://14th.fediverse.party"><svg class="f-icon"><use xlink:href="#icon-star"></use></svg> <span>fediquiz</span></a></li>
    <li><a href="/en/about"><svg class="f-icon"><use xlink:href="#icon-star"></use></svg> <span><%- __('about') %></span></a></li>
  </ul>
</div>