<nav class="navbar navbar-expand-sm navbar-inverse navbar-fixed-top">
  <div class="container">
    <div class="navbar-brand">
      <a href="/">
        <img src="/assets/logos/logo_solo_on_dark.svg" height="25" class="d-inline-block align-top" style="margin-right: 10px;" alt="logo" />
        gVisor
      </a>
    </div>

    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="/docs">Documentation</a></li>
        <li><a href="/blog">Blog</a></li>
        <li><a href="/users">Users</a></li>
        <li><a href="/application-compatibility">Compatibility</a></li>
        <li><a href="/security-track-record">Security</a></li>
        <li><a href="/community/">Community</a></li>
        <li><a href="https://github.com/google/gvisor">GitHub</a></li>
      </ul>
    </div>
  </div>
  <script>
    const navBar = document.querySelector('.navbar');
    const observer = new ResizeObserver(entries => {
      for (let entry of entries) {
        const newHeight = entry.contentRect.height;
        document.documentElement.style.setProperty('--nav-height', `${newHeight}px`);
      }
    });
    if (navBar) {
      observer.observe(navBar);
    }
  </script>
</nav>
