WYGIWYH/app/templates/includes/navbar.html

{% load static %}
{% load i18n %}
{% load active_link %}
<nav class="navbar navbar-expand-lg border-bottom bg-body-tertiary" hx-boost="true">
  <div class="container-fluid">
    <a class="navbar-brand fw-bold text-primary font-base" href="{% url 'index' %}">
      <img src="{% static 'img/logo-icon.svg' %}" alt="WYGIWYH Logo" height="40" width="40" title="WYGIWYH"/>
    </a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent"
            aria-controls="navbarContent" aria-expanded="false" aria-label={% translate "Toggle navigation" %}>
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0 nav-underline" hx-push-url="true">
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle {% active_link views='monthly_overview||yearly_overview_currency||yearly_overview_account||calendar' %}"
             href="#"
             role="button"
             data-bs-toggle="dropdown"
             aria-expanded="false">
            {% translate 'Overview' %}
          </a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item {% active_link views='monthly_overview' %}"
                   href="{% url 'monthly_index' %}">{% translate 'Monthly' %}</a></li>
            <li><a class="dropdown-item {% active_link views='yearly_overview_currency' %}"
                   href="{% url 'yearly_index_currency' %}">{% translate 'Yearly by currency' %}</a></li>
            <li><a class="dropdown-item {% active_link views='yearly_overview_account' %}"
                   href="{% url 'yearly_index_account' %}">{% translate 'Yearly by account' %}</a></li>
            <li><a class="dropdown-item {% active_link views='calendar' %}"
                   href="{% url 'calendar_index' %}">{% translate 'Calendar' %}</a></li>
          </ul>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle {% active_link views='net_worth_current||net_worth_projected' %}"
             href="#" role="button"
             data-bs-toggle="dropdown"
             aria-expanded="false">
            {% translate 'Net Worth' %}
          </a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item {% active_link views='net_worth_current' %}"
                   href="{% url 'net_worth_current' %}">{% translate 'Current' %}</a></li>
            <li><a class="dropdown-item {% active_link views='net_worth_projected' %}"
                   href="{% url 'net_worth_projected' %}">{% translate 'Projected' %}</a></li>
          </ul>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle {% active_link views='installment_plans_index||recurring_trasanctions_index||transactions_all_index' %}"
             href="#" role="button"
             data-bs-toggle="dropdown"
             aria-expanded="false">
            {% translate 'Transactions' %}
          </a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item {% active_link views='transactions_all_index' %}"
                   href="{% url 'transactions_all_index' %}">{% translate 'All' %}</a></li>
            <li>
              <hr class="dropdown-divider">
            </li>
            <li><a class="dropdown-item {% active_link views='installment_plans_index' %}"
                   href="{% url 'installment_plans_index' %}">{% translate 'Installment Plans' %}</a></li>
            <li><a class="dropdown-item {% active_link views='recurring_trasanctions_index' %}"
                   href="{% url 'recurring_trasanctions_index' %}">{% translate 'Recurring Transactions' %}</a></li>
          </ul>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle {% active_link views='dca_strategy_index||dca_strategy_detail_index||unit_price_calculator||currency_converter' %}"
             href="#" role="button"
             data-bs-toggle="dropdown"
             aria-expanded="false">
            {% translate 'Tools' %}
          </a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item {% active_link views='dca_strategy_index||dca_strategy_detail_index' %}"
                   href="{% url 'dca_strategy_index' %}">{% translate 'Dollar Cost Average Tracker' %}</a></li>
            <li>
            <li><a class="dropdown-item {% active_link views='unit_price_calculator' %}"
                 href="{% url 'unit_price_calculator' %}">{% translate 'Unit Price Calculator' %}</a></li>
            <li>
            <li><a class="dropdown-item {% active_link views='currency_converter' %}"
                 href="{% url 'currency_converter' %}">{% translate 'Currency Converter' %}</a></li>
            <li>
          </ul>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle {% active_link views='tags_index||entities_index||categories_index||accounts_index||account_groups_index||currencies_index||exchange_rates_index||rules_index' %}"
             href="#" role="button"
             data-bs-toggle="dropdown"
             aria-expanded="false">
            {% translate 'Management' %}
          </a>
          <ul class="dropdown-menu">
            <li><h6 class="dropdown-header">{% trans 'Transactions' %}</h6></li>
            <li><a class="dropdown-item {% active_link views='categories_index' %}"
                   href="{% url 'categories_index' %}">{% translate 'Categories' %}</a></li>
            <li><a class="dropdown-item {% active_link views='tags_index' %}"
                   href="{% url 'tags_index' %}">{% translate 'Tags' %}</a></li>
            <li><a class="dropdown-item {% active_link views='entities_index' %}"
                   href="{% url 'entities_index' %}">{% translate 'Entities' %}</a></li>
            <li>
              <hr class="dropdown-divider">
            </li>
            <li><h6 class="dropdown-header">{% trans 'Accounts' %}</h6></li>
            <li><a class="dropdown-item {% active_link views='accounts_index' %}"
                   href="{% url 'accounts_index' %}">{% translate 'Accounts' %}</a></li>
            <li><a class="dropdown-item {% active_link views='account_groups_index' %}"
                   href="{% url 'account_groups_index' %}">{% translate 'Account Groups' %}</a></li>
            <li>
              <hr class="dropdown-divider">
            </li>
            <li><h6 class="dropdown-header">{% trans 'Currencies' %}</h6></li>
            <li><a class="dropdown-item {% active_link views='currencies_index' %}" 
                   href="{% url 'currencies_index' %}">{% translate 'Currencies' %}</a></li>
            <li><a class="dropdown-item {% active_link views='exchange_rates_index' %}" 
                   href="{% url 'exchange_rates_index' %}">{% translate 'Exchange Rates' %}</a></li>
            <li>
              <hr class="dropdown-divider">
            </li>
            <li><h6 class="dropdown-header">{% trans 'Automation' %}</h6></li>
            <li><a class="dropdown-item {% active_link views='rules_index' %}"
                   href="{% url 'rules_index' %}">{% translate 'Rules' %}</a></li>
            <li>
              <hr class="dropdown-divider">
            </li>
            <li>
              <a class="dropdown-item"
                 href="{% url 'admin:index' %}"
                 hx-boost="false"
                 data-bs-placement="right"
                 data-bs-toggle="tooltip"
                 data-bs-title="{% translate "Only use this if you know what you're doing" %}">
                {% translate 'Django Admin' %}
              </a>
            </li>
          </ul>
        </li>
      </ul>
      <ul class="navbar-nav mt-3 mb-2 mb-lg-0 mt-lg-0">
        <li class="nav-item text-center w-100">
          <a class="nav-item tw-text-2xl tw-cursor-pointer me-lg-4"
             data-bs-toggle="tooltip" data-bs-placement="left" data-bs-title="{% trans "Calculator" %}"
             _="on click trigger show on #calculator">
            <i class="fa-solid fa-calculator"></i>
          </a>
        </li>
        <li class="text-center w-100">{% include 'includes/navbar/user_menu.html' %}</li>

      </ul>
    </div>
  </div>
</nav>