{% load website_tags %}
{% load i18n %}
{% load static %}

<header>

  <nav class="navbar navbar-expand-lg navbar-dark navbar-transparent">

    <div class="container-fluid" id="navbarcontainer">

      <a class="navbar-brand logo" href="#"><img src="{% static 'website/img/__common__/logo.png' %}" alt=""></a>

      <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar"
        aria-controls="offcanvasNavbar" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">

        <div class="offcanvas-header">
          <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>

        <div class="offcanvas-body">

          <ul class="navbar-nav ms-auto">

            <li class="nav-item">
              <a class="nav-link active" href="#home">Home</a>
            </li>


            <li class="nav-item">
              <a class="nav-link" href="#about">About</a>
            </li>

            <li class="nav-item">
              <a class="nav-link" href="#projects">Projects</a>
            </li>

          </ul>

        </div>

        <a class="navbar-brand contact" href="#footer">Contact</a>

      </div>

  </nav>

</header>