haikal/templates/header.html

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

<nav class="navbar navbar-expand-lg bg-primary" data-bs-theme="dark">
      <div class="container-fluid">
        <!-- Brand/Logo -->
        <a class="navbar-brand" href="{% url 'landing_page' %}">
          <img src="{% static 'images/logo.png' %}"
               alt="Brand Logo"
               style="height: 30px; width: auto;" />
        </a>
        <button class="navbar-toggler"
                type="button"
                data-bs-toggle="collapse"
                data-bs-target="#headerNav"
                aria-controls="headerNav"
                aria-expanded="false"
                aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="headerNav">
          <ul class="navbar-nav me-auto mb-2 mb-lg-0">
          {% if user.is_authenticated and user.dealer.pk %}
            <li class="nav-item">
              {% block home %}<a class="nav-link" href="{% url 'landing_page' %}">{% trans 'home' %}</a>{% endblock %}
            </li>

            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle"
                 href="#" id="inventoryDropdown"
                 role="button" data-bs-toggle="dropdown"
                 aria-expanded="false">
                  {% trans 'inventory' %}
              </a>
           <ul class="dropdown-menu" aria-labelledby="inventoryDropdown">
                <li>
                  <a href="{% url 'car_add' %}"
                     class="dropdown-item fw-lighter">
                      <small>
                          {% trans "add car" %}
                      </small>
                  </a>
                </li>
                <li>
                    <a href="{% url 'inventory_stats' %}"
                       class="dropdown-item fw-lighter">
                        <small>
                            {% trans "Inventory" %}
                        </small>
                    </a>
                </li>
              </ul>
            </li>
              <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle"
                 href="#" id="customerDropdown"
                 role="button" data-bs-toggle="dropdown"
                 aria-expanded="false">
                  {% trans 'customers' %}
              </a>
           <ul class="dropdown-menu" aria-labelledby="customerDropdown">
                <li>
                  <a href="{% url 'customer_create' %}"
                     class="dropdown-item fw-lighter">
                      <small>
                          {% trans "add customer" %}
                      </small>
                  </a>
                </li>
                <li>
                    <a href="{% url 'customer_list' %}"
                       class="dropdown-item fw-lighter">
                        <small>
                            {% trans "customers" %}
                        </small>
                    </a>
                </li>
              </ul>
            </li>
                {% else %}
                <li class="nav-item">
              {% block welcome %}<a class="nav-link" href="{% url 'welcome' %}">{% trans 'home' %}</a>{% endblock %}
            </li>
            {% endif %}
          </ul>

          <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
            {% if user.is_authenticated and user.dealer%}
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                <i class="bi bi-person-circle"></i>
                {{ user.dealer.get_local_name }}
              </a>
              <ul class="dropdown-menu" aria-labelledby="userDropdown">
                <li>
                  <a class="dropdown-item fw-lighter" href="{% url 'dealer_detail' user.dealer.pk %}"><small>{% translate 'profile' %}</small></a>
                </li>
                <li>
                    <a class="dropdown-item fw-lighter" href="{% url 'logout' %}"><small>{% trans 'Sign Out' %}</small></a>
                </li>
              </ul>
            </li>
            {% else %}
            <li class="nav-item">
              <a class="nav-link" href="{% url 'login' %}">{% translate 'Sign In' %}</a>
            </li>
            {% endif %}
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="languageDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                {% if request.LANGUAGE_CODE == 'ar' %}
                <i class="bi bi-globe"></i><span class="ms-1">اللغة</span>
                {% else %}
                <i class="bi bi-globe"></i><span class="ms-1">Language</span>
                {% endif %}
              </a>
              <ul class="dropdown-menu" aria-labelledby="languageDropdown">
                <li>
                  <a class="dropdown-item fw-lighter" href="{% url 'switch_language' %}?language=en"><small>English</small></a>
                </li>
                <li>
                  <a class="dropdown-item fw-lighter" href="{% url 'switch_language' %}?language=ar"><small>العربية</small></a>
                </li>
              </ul>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle d-flex align-items-center" href="#" id="theme-menu" aria-expanded="false" data-bs-toggle="dropdown" data-bs-display="static" aria-label="Toggle theme">
                <i class="bi bi-circle-half"></i>
                <span class="d-lg-none ms-2"><small>{% trans 'Theme' %}</small></span>
              </a>
              <ul class="dropdown-menu">
                <li>
                  <button type="button" class="dropdown-item align-items-center" data-bs-theme-value="light" aria-pressed="false">
                    <i class="bi bi-sun-fill"></i>
                  </button>
                </li>
                <li>
                  <button type="button" class="dropdown-item align-items-center" data-bs-theme-value="dark" aria-pressed="true">
                    <i class="bi bi-moon-fill"></i>
                  </button>
                </li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </nav>