<header>
  <div id="mobile-menu">
      <div id="nav-button" class="fa fa-bars fa-2x button"></div>
  </div>
  <section id="logo"><a href="/" class="express">Express</a>
  </section>
  <div id="navbar">
      <input id="q" placeholder="🔎 search">
      <ul id="navmenu">
          <li><a href="/" id="home-menu"{% if page.menu == 'home' %} class="active"{% endif %}>Home</a></li>
          <li id="getting-started-menu" class="submenu">
                  <a href="/{{ page.lang }}/starter/installing.html"{% if page.menu == 'starter' %} class="active"{% endif %}>Getting started</a>
                      <ul class="submenu-content">
                          <li>
                            <a href="/{{ page.lang }}/starter/installing.html">
                              Installing
                            </a>
                          </li>
                          <li>
                            <a href="/{{ page.lang }}/starter/hello-world.html">
                              Hello world
                            </a>
                          </li>
                          <li>
                          <a href="/{{ page.lang }}/starter/generator.html">
                            Express generator
                          </a>
                          </li>
                          <li>
                            <a href="/{{ page.lang }}/starter/basic-routing.html">
                              Basic routing
                            </a>
                          </li>
                          <li>
                            <a href="/{{ page.lang }}/starter/static-files.html">
                              Static files
                            </a>
                          </li>
                          <li>
                            <a href="/{{ page.lang }}/starter/examples.html">
                              More examples
                            </a>
                          </li>
                          <li>
                            <a href="/{{ page.lang }}/starter/faq.html">
                              FAQ
                            </a>
                          </li>
                      </ul>
          </li>
          <li id="guide-menu" class="submenu">
                  <a href="/{{ page.lang }}/guide/routing.html"{% if page.menu == 'guide' %} class="active"{% endif %}>Guide</a>
                      <ul class="submenu-content">
                          <li><a href="/{{ page.lang }}/guide/routing.html">Routing</a>
                          </li>
                          <li><a href="/{{ page.lang }}/guide/writing-middleware.html">Writing middleware</a>
                          </li>
                          <li><a href="/{{ page.lang }}/guide/using-middleware.html">Using middleware</a>
                          </li>
                          <li><a href="/{{ page.lang }}/guide/overriding-express-api.html">Overriding the Express API</a>
                          </li>
                          <li><a href="/{{ page.lang }}/guide/using-template-engines.html">Using template engines</a>
                          </li>
                          <li><a href="/{{ page.lang }}/guide/error-handling.html">Error handling</a>
                          </li>
                          <li><a href="/{{ page.lang }}/guide/debugging.html">Debugging</a>
                          </li>
                          <li><a href="/{{ page.lang }}/guide/behind-proxies.html">Express behind proxies</a>
                          </li>
                          <li><a href="/{{ page.lang }}/guide/migrating-4.html">Moving to Express 4</a>
                          </li>
                          <li><a href="/{{ page.lang }}/guide/migrating-5.html">Moving to Express 5</a>
                          </li>
                          <li><a href="/{{ page.lang }}/guide/database-integration.html">Database integration</a>
                          </li>
                      </ul>
          </li>
          <li id="application-menu" class="submenu">
                  <a href="/{{ page.lang }}/5x/api.html"{% if page.menu == 'api' %} class="active"{% endif %}>API reference</a>
                      <ul class="submenu-content">
                          <li><a href="/{{ page.lang }}/5x/api.html">5.x</a>
                          </li>
                          <li><a href="/{{ page.lang }}/4x/api.html">4.x</a>
                          </li>
                          <li><a href="/{{ page.lang }}/3x/api.html">3.x (deprecated)</a>
                          </li>
                          <li><a href="/2x/">2.x (deprecated)</a>
                          </li>
                      </ul>
          </li>
          <li id="advanced-topics-menu" class="submenu">
                  <a href="/{{ page.lang }}/advanced/developing-template-engines.html"{% if page.menu == 'advanced' %} class="active"{% endif %}>Advanced topics</a>
                      <ul class="submenu-content">
                          <li><a href="/{{ page.lang }}/advanced/developing-template-engines.html">Building template engines</a>
                          </li>
                          <li><a href="/{{ page.lang }}/advanced/security-updates.html">Security updates</a>
                          </li>
                          <li><a href="/{{ page.lang }}/advanced/best-practice-security.html">Security best practices</a>
                          </li>
                          <li><a href="/{{ page.lang }}/advanced/best-practice-performance.html">Performance best practices</a>
                          </li>
                          <li><a href="/{{ page.lang }}/advanced/healthcheck-graceful-shutdown.html">Health checks &  shutdown</a>
                          </li>
                      </ul>
          </li>
          <li id="resources-menu" class="submenu">
                  <a href="/{{ page.lang }}/resources/glossary.html"{% if page.menu == 'resources' %} class="active"{% endif %}>Resources</a>
                      <ul class="submenu-content">
                          <li>
                            <a href="/{{ page.lang }}/resources/community.html">Community</a>
                          </li>
                          <li>
                            <a href="/{{ page.lang }}/resources/glossary.html">Glossary</a>
                          </li>
                          <li>
                            <a href="/{{ page.lang }}/resources/middleware.html">Middleware</a>
                          </li>
                          <li>
                            <a href="/{{ page.lang }}/resources/utils.html">Utility modules</a>
                          </li>
                          <li>
                            <a href="/{{ page.lang }}/resources/contributing.html">Contributing to Express</a>
                          </li>
                          <li>
                            <a href="/{{ page.lang }}/changelog/4x.html">Release Change Log</a>
                          </li>
                      </ul>
          </li>
          <li><a href="/{{ page.lang }}/support" id="support-menu"{% if page.menu == 'support' %} class="active"{% endif %}>Support</a></li>
          <li id="blog-menu" class="submenu">
                  <a href="{{site.posts.first.url}}"{% if page.menu == 'blog' %} class="active"{% endif %}>Blog</a>
                      <ul class="submenu-content">
                          <li>
                            <a href="{{site.posts.first.url}}">Latest post</a> 
                          </li>
                          <li>
                            <a href="/{{ page.lang }}/blog/posts.html">All posts</a> 
                          </li>                          
                          <li>
                            <a href="/{{ page.lang }}/blog/write-post.html">Write a Post</a>
                          </li>
                      </ul>
                  </li>
      </ul>
  </div>
  <div id="theme-icon-container" class="theme-toggle default-theme" title="toggle darkmode">
    <i class="fa fa-moon-o fa-2x hidden-dark"></i>
    <span class="sun-icon hidden-light"></span>
  </div>
</header>