    <div id="menubar">
      <script src="/js/navbar.js"></script>
      <div id="menubar_logo" class="hide_micro">
        <a href="/">
          <picture>
            <source media="(min-width: 290px)" srcset="/images/logo/full-40.jxl" type="image/jxl">
            <source media="(min-width: 290px)" srcset="/images/logo/full-40.webp" type="image/webp">
            <source media="(min-width: 290px)" srcset="/images/logo/full-40.png" type="image/png">
            <source media="(max-width: 289px)" srcset="/images/logo/short-20.jxl" type="image/jxl">
            <source media="(max-width: 289px)" srcset="/images/logo/short-20.png" type="image/png">
            <img src="/images/logo/full-40.png" alt="Fred Boniface logo">
          </picture>
        </a>
      </div>
      <div id="menubar_hamburger" class="hide_micro">
        <button class="sidebar_control" id="sidebar_open_short" onclick="sidebarOpen()">&#9776;</button>
        <button class="sidebar_control" id="sidebar_close_short" onclick="sidebarClose()">&times;</button>
      </div>
    </div>
    <div id="sidebar">
      <a href="/">Home</a>
      <a href="/keys.php">Keys</a>
      <a href="/projects.php">Things I Do</a>
      <a href="/contact.php">Contact</a>
      <a href="/about.php">About</a>
      <div id="sidebar_logo">
        <picture>
          <source srcset="/images/logo/short-40.jxl" type="image/jxl">
          <img src="/images/logo/short-40.png" alt="">
        </picture>
      </div>
      <div id="sidebar_social">
        <a href="https://500px.com/p/fredboniface" target="_blank" rel="noreferrer noopener">
          <picture>
            <source media="(min-width: 399px)" srcset="/images/social-icons/500px_seek_114.jxl" type="image/jxl">
            <source media="(min-width: 399px)" srcset="/images/social-icons/500px_seek_114.webp" type="image/webp">
            <source srcset="/images/social-icons/500px_seek_58.jxl" type="image/jxl">
            <source srcset="/images/social-icons/500px_seek_58.webp" type="image/webp">
            <img src="/images/social-icons/500px_seek_58.png" alt="500px Logo">
          </picture>
        </a>
        <a href="https://fb.me/fred.boniface" target="_blank" rel="noreferrer noopener">
          <picture>
            <source media="(min-width: 399px)" srcset="/images/social-icons/fb_blue_144.png" type="image/png">
            <source srcset="/images/social-icons/fb_blue_58.png" type="image/png">
            <img src="/images/social-icons/fb_blue_58.png" alt="Facebook Logo">
          </picture>
        </a>
        <a href="https://github.com/frdbonif" target="_blank" rel="noreferrer noopener">
          <picture>
            <source media="(min-width: 399px)" srcset="/images/social-icons/gh_white_120.png" type="image/png">
            <source srcset="/images/social-icons/gh_white_64.png" type="image/png">
            <img src="/images/social-icons/gh_white_64.png" alt="Github Logo">
          </picture>
        </a>
      </div>
    </div>