tecvico-website/templates/partials/_navbar.html

{% load static %}
<nav class="navbar" id="navbar" role="navigation" aria-label="Main navigation">
  <div class="navbar-container">

    <a href="{% url 'pages:home' %}" class="navbar-brand" aria-label="Tecvico home">
      {% include "partials/_brand_icon.html" with placement="navbar" %}
    </a>

    <button type="button" class="navbar-toggle" id="navbarToggle" aria-expanded="false" aria-controls="navbarMenu" aria-label="Toggle navigation">
      <span class="toggle-bar"></span>
      <span class="toggle-bar"></span>
      <span class="toggle-bar"></span>
    </button>

    <div class="navbar-menu" id="navbarMenu">
      <ul class="nav-list" role="list">

        <li class="nav-item">
          <a href="{% url 'pages:home' %}" class="nav-link {% if request.resolver_match.url_name == 'home' %}active{% endif %}">
            Home
          </a>
        </li>

        {% if nav_main_products %}
        <li class="nav-item has-megamenu" id="productsNavItem">
          <a href="{% url 'products:overview' %}" class="nav-link {% if 'products' in request.resolver_match.namespace %}active{% endif %}" aria-haspopup="true" aria-expanded="false" id="productsTrigger">
            Products
            <svg class="nav-arrow" width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true">
              <path d="M2 4L6 8L10 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
          </a>
          <div class="megamenu" role="menu" aria-labelledby="productsTrigger">
            <div class="megamenu-inner">
              <div class="megamenu-products-scroll" tabindex="0" aria-label="Product list">
                <ul class="megamenu-products" role="list">
                  {% for product in nav_main_products %}
                  <li class="megamenu-product-item{% if product.sub_products.all %} has-subproducts{% endif %}">
                    <a href="{{ product.get_absolute_url }}" class="megamenu-product-link" role="menuitem">
                      <span class="megamenu-product-name">
                        {{ product.name }}
                        {% if product.sub_products.all %}
                        <svg class="megamenu-sub-chevron" width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true">
                          <path d="M2 4L6 8L10 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                        {% endif %}
                      </span>
                      <span class="megamenu-product-desc">{{ product.short_description }}</span>
                    </a>
                    {% if product.sub_products.all %}
                    <ul class="megamenu-sublist" role="list" aria-label="{{ product.name }} modules">
                      {% for sub in product.sub_products.all %}
                      <li>
                        <a href="{{ sub.get_absolute_url }}" class="megamenu-sublink" role="menuitem">{{ sub.name }}</a>
                      </li>
                      {% endfor %}
                    </ul>
                    {% endif %}
                  </li>
                  {% endfor %}
                </ul>
              </div>
            </div>
          </div>
        </li>
        {% endif %}

        <li class="nav-item">
          <a href="{% url 'pages:about' %}" class="nav-link {% if request.resolver_match.url_name == 'about' %}active{% endif %}">
            About
          </a>
        </li>

        {% for page in nav_custom_pages %}
        <li class="nav-item">
          <a href="{% url 'pages:custom_page' slug=page.slug %}" class="nav-link {% if request.resolver_match.url_name == 'custom_page' and request.resolver_match.kwargs.slug == page.slug %}active{% endif %}">
            {{ page.nav_label }}
          </a>
        </li>
        {% endfor %}

        <li class="nav-item">
          <a href="{% url 'pages:faq' %}" class="nav-link {% if request.resolver_match.url_name == 'faq' %}active{% endif %}">
            FAQ
          </a>
        </li>

        <li class="nav-item">
          <a href="{% url 'pages:contact' %}" class="nav-link nav-link--cta {% if request.resolver_match.url_name == 'contact' %}active{% endif %}">
            Contact
          </a>
        </li>

        {% if user.is_authenticated %}
        <li class="nav-item nav-item--account">
          <details class="navbar-account-menu">
            <summary class="navbar-account" aria-label="Open account menu">
              <span class="navbar-account__avatar" aria-hidden="true">
                <img src="{% if user.client_profile.avatar %}{{ user.client_profile.avatar.url }}{% else %}{% static 'images/tecvico/default-avatar.png' %}{% endif %}" alt="" />
              </span>
              <span class="navbar-account__status" aria-hidden="true"></span>
            </summary>
            <div class="navbar-account-dropdown">
              <div class="navbar-account-dropdown__identity">
                <img src="{% if user.client_profile.avatar %}{{ user.client_profile.avatar.url }}{% else %}{% static 'images/tecvico/default-avatar.png' %}{% endif %}" alt="" />
                <div><strong>{{ user.get_full_name|default:user.username }}</strong><span>{{ user.email }}</span></div>
              </div>
              <div class="navbar-account-dropdown__section">
                <a href="{% url 'projects:dashboard' %}"><span aria-hidden="true">⌂</span><span><strong>Workspace</strong><small>Projects and activity</small></span></a>
                <a href="{% url 'accounts:profile' %}"><span aria-hidden="true">○</span><span><strong>Your profile</strong><small>Identity and account details</small></span></a>
                <a href="{% url 'projects:create' %}"><span aria-hidden="true">＋</span><span><strong>New project brief</strong><small>Start a scientific project</small></span></a>
              </div>
              <div class="navbar-account-dropdown__section navbar-account-dropdown__section--compact">
                <a href="{% url 'pages:faq' %}">Help center</a>
                <a href="{% url 'pages:contact' %}">Contact support</a>
                <form method="post" action="{% url 'accounts:logout' %}">{% csrf_token %}<button type="submit">Sign out</button></form>
              </div>
            </div>
          </details>
        </li>
        {% else %}
        <li class="nav-item">
          <a href="{% url 'accounts:login' %}" class="nav-link {% if request.resolver_match.url_name == 'login' %}active{% endif %}">
            Login
          </a>
        </li>
        <li class="nav-item">
          <a href="{% url 'accounts:signup' %}" class="nav-link nav-link--cta {% if request.resolver_match.url_name == 'signup' %}active{% endif %}">
            Start a Project
          </a>
        </li>
        {% endif %}

      </ul>
    </div>

  </div>
</nav>