WYGIWYH/app/templates/includes/sidebar.html

{% load active_link %}
{% load cache_access %}
{% load settings %}
{% load i18n %}
{% load static %}

<div
    class="sidebar {% if request.session.sidebar_status == 'floating' %}group sidebar-floating{% elif request.session.sidebar_status == 'fixed' %}sidebar-fixed{% else %}group sidebar-floating{% endif %}"
    id="sidebar-container">
  <nav
      id="sidebar"
      hx-boost="true"
      hx-swap="transition:true"
      data-bs-scroll="true"
      class="offcanvas-lg offcanvas-start lg:flex flex-col fixed top-0 left-0 h-full bg-base-300! border-e-2 border-base-100 lg:group-hover:shadow-[5px_0px_10px_-2px_rgba(0,0,0,0.2)] z-1045">
    <div class="hidden lg:flex items-center justify-between border-b border-base-content/10 sidebar-submenu-header">
      <a href="{% url 'index' %}" class="m-0 hidden lg:flex justify-start p-4 no-underline sidebar-title">
         <div class="logo"></div>
        <span class="text-2xl font-bold ml-3">WYGIWYH</span>
      </a>

      <button
          id="sidebar-toggle-btn"
          class="btn btn-ghost btn-circle w-12 h-12 flex items-center justify-center transition-all duration-300"
          hx-get="{% url 'toggle_sidebar_status' %}"
          _="on click
           toggle .sidebar-floating on #sidebar-container
           toggle .group on #sidebar-container
           toggle .sidebar-fixed on #sidebar-container
        end
      "
      >
        <i class="fa-solid fa-thumbtack fa-sm"></i>
        <i class="fa-solid fa-thumbtack-slash fa-sm"></i>
      </button>
    </div>

    <div class="lg:hidden flex justify-between items-center p-4 text-base-content border-b border-base-content/10">
      <a href="{% url 'index' %}" class="flex justify-start no-underline">
        <div class="logo"></div>
        <span class="text-2xl font-bold ml-3">WYGIWYH</span>
      </a>
      <button type="button" class="btn btn-ghost btn-sm btn-circle" data-bs-target="#sidebar" data-bs-dismiss="offcanvas"
              aria-label={% translate 'Close' %}><i class="fa-solid fa-xmark"></i></button>
    </div>

    <ul class="sidebar-item-list list-none p-3 flex flex-col gap-1 whitespace-nowrap lg:group-hover:animate-[disable-pointer-events]"
        style="animation-duration: 100ms">

      <c-components.sidebar-menu-item
          title="{% translate 'Monthly' %}"
          url='monthly_index'
          active="monthly_overview"
          icon="fa-solid fa-list">
      </c-components.sidebar-menu-item>
      <c-components.sidebar-menu-item
          title="{% translate 'Yearly' %}"
          url='yearly_index'
          active="yearly_overview_currency||yearly_overview_account"
          icon="fa-solid fa-calendar-plus">
      </c-components.sidebar-menu-item>
      <c-components.sidebar-menu-item
          title="{% translate 'Calendar' %}"
          url='calendar_index'
          active="calendar"
          icon="fa-solid fa-calendar-days">
      </c-components.sidebar-menu-item>
      <c-components.sidebar-menu-item
          title="{% translate 'Insights' %}"
          url='insights_index'
          active="insights_index"
          icon="fa-solid fa-chart-simple">
      </c-components.sidebar-menu-item>
      <c-components.sidebar-menu-item
          title="{% translate 'Net Worth' %}"
          url='net_worth'
          active="net_worth"
          icon="fa-solid fa-money-bill">
      </c-components.sidebar-menu-item>

      <c-components.sidebar-menu-header title="{% translate 'Transactions' %}"></c-components.sidebar-menu-header>
      <c-components.sidebar-menu-item
          title="{% translate 'All' %}"
          url='transactions_all_index'
          active="transactions_all_index"
          icon="fa-solid fa-right-left">
      </c-components.sidebar-menu-item>
      {% settings "ENABLE_SOFT_DELETE" as enable_soft_delete %}
      {% if enable_soft_delete %}
        <c-components.sidebar-menu-item
            title="{% translate 'Trash Can' %}"
            url='transactions_trash_index'
            active="transactions_trash_index"
            icon="fa-solid fa-trash">
        </c-components.sidebar-menu-item>
      {% endif %}
      <c-components.sidebar-menu-item
          title="{% translate 'Quick Transactions' %}"
          url='quick_transactions_index'
          active="quick_transactions_index"
          icon="fa-solid fa-person-running">
      </c-components.sidebar-menu-item>
      <c-components.sidebar-menu-item
          title="{% translate 'Installment Plans' %}"
          url='installment_plans_index'
          active="installment_plans_index"
          icon="fa-solid fa-divide">
      </c-components.sidebar-menu-item>
      <c-components.sidebar-menu-item
          title="{% translate 'Recurring Transactions' %}"
          url='recurring_trasanctions_index'
          active="recurring_trasanctions_index"
          icon="fa-solid fa-repeat">
      </c-components.sidebar-menu-item>

      <c-components.sidebar-menu-header title="{% translate 'Tools' %}"></c-components.sidebar-menu-header>
      <c-components.sidebar-menu-item
          title="{% translate 'Dollar Cost Average Tracker' %}"
          url='dca_strategy_index'
          active="dca_strategy_index||dca_strategy_detail_index"
          icon="fa-solid fa-magnifying-glass-chart">
      </c-components.sidebar-menu-item>
      <c-components.sidebar-menu-item
          title="{% translate 'Unit Price Calculator' %}"
          url='unit_price_calculator'
          active="unit_price_calculator"
          icon="fa-solid fa-tags">
      </c-components.sidebar-menu-item>
      <c-components.sidebar-menu-item
          title="{% translate 'Currency Converter' %}"
          url='currency_converter'
          active="currency_converter"
          icon="fa-solid fa-money-bill-transfer">
      </c-components.sidebar-menu-item>

      <c-components.sidebar-menu-header title=""></c-components.sidebar-menu-header>

      <c-components.sidebar-collapsible-panel
          title="{% translate 'Management' %}"
          icon="fa-solid fa-toolbox"
          active="tags_index||entities_index||categories_index||accounts_index||account_groups_index||currencies_index||exchange_rates_index||rules_index||import_profiles_index||automatic_exchange_rates_index||export_index||users_index">
        <c-components.sidebar-menu-header title="{% translate 'Transactions' %}"></c-components.sidebar-menu-header>
        <c-components.sidebar-menu-item
            title="{% translate 'Categories' %}"
            url='categories_index'
            active="categories_index"
            icon="fa-solid fa-icons">
        </c-components.sidebar-menu-item>
        <c-components.sidebar-menu-item
            title="{% translate 'Tags' %}"
            url='tags_index'
            active="tags_index"
            icon="fa-solid fa-hashtag">
        </c-components.sidebar-menu-item>
        <c-components.sidebar-menu-item
            title="{% translate 'Entities' %}"
            url='entities_index'
            active="entities_index"
            icon="fa-solid fa-user-group">
        </c-components.sidebar-menu-item>

        <c-components.sidebar-menu-header title="{% translate 'Accounts' %}"></c-components.sidebar-menu-header>
        <c-components.sidebar-menu-item
            title="{% translate 'Accounts' %}"
            url='accounts_index'
            active="accounts_index"
            icon="fa-solid fa-wallet">
        </c-components.sidebar-menu-item>
        <c-components.sidebar-menu-item
            title="{% translate 'Account Groups' %}"
            url='account_groups_index'
            active="account_groups_index"
            icon="fa-solid fa-wallet">
        </c-components.sidebar-menu-item>

        <c-components.sidebar-menu-header title="{% translate 'Currencies' %}"></c-components.sidebar-menu-header>
        <c-components.sidebar-menu-item
            title="{% translate 'Currencies' %}"
            url='currencies_index'
            active="currencies_index"
            icon="fa-solid fa-coins">
        </c-components.sidebar-menu-item>
        <c-components.sidebar-menu-item
            title="{% translate 'Exchange Rates' %}"
            url='exchange_rates_index'
            active="exchange_rates_index"
            icon="fa-solid fa-right-left">
        </c-components.sidebar-menu-item>

        <c-components.sidebar-menu-header title="{% translate 'Automation' %}"></c-components.sidebar-menu-header>
        <c-components.sidebar-menu-item
            title="{% translate 'Rules' %}"
            url='rules_index'
            active="rules_index"
            icon="fa-solid fa-pen-ruler">
        </c-components.sidebar-menu-item>
        <c-components.sidebar-menu-item
            title="{% translate 'Import' %}"
            url='import_profiles_index'
            active="import_profiles_index"
            icon="fa-solid fa-file-import">
        </c-components.sidebar-menu-item>
        {% if user.is_superuser %}
          <c-components.sidebar-menu-item
              title="{% translate 'Export and Restore' %}"
              url='export_index'
              active="export_index"
              icon="fa-solid fa-file-export">
          </c-components.sidebar-menu-item>
        {% endif %}
        <c-components.sidebar-menu-item
            title="{% translate 'Automatic Exchange Rates' %}"
            url='automatic_exchange_rates_index'
            active="automatic_exchange_rates_index"
            icon="fa-solid fa-right-left">
        </c-components.sidebar-menu-item>

        {% if user.is_superuser %}
          <c-components.sidebar-menu-header title="{% translate 'Admin' %}"></c-components.sidebar-menu-header>
          <c-components.sidebar-menu-item
              title="{% translate 'Users' %}"
              url='users_index'
              active="users_index"
              icon="fa-solid fa-users">
          </c-components.sidebar-menu-item>
          <c-components.sidebar-menu-url-item
              title="{% translate 'Django Admin' %}"
              tooltip="{% translate "Only use this if you know what you're doing" %}"
              url='/admin/'
              icon="fa-solid fa-screwdriver-wrench">
          </c-components.sidebar-menu-url-item>
        {% endif %}
      </c-components.sidebar-collapsible-panel>
    </ul>

    <div class="mt-auto p-2 w-full">
      {% get_update_check as update_check %}
      {% if update_check.update_available %}
        <div class="my-3 sidebar-item">
          <a class="btn btn-primary btn-soft btn-sm w-full !block content-center"
             href="https://github.com/eitchtee/WYGIWYH/releases/latest" target="_blank">
            <i class="fa-solid fa-circle-exclamation fa-fw lg:group-hover:me-2"></i>
            <span>v.{{ update_check.latest_version }} {% translate 'is available' %}!</span></a>
        </div>
      {% endif %}

      <div class="w-full sidebar-item" role="group">
        <button type="button" class="btn btn-secondary btn-sm w-full !block content-center"
                _="on click trigger show on #calculator">
          <i class="fa-solid fa-calculator fa-fw lg:group-hover:me-2"></i>
          <span>{% trans "Calculator" %}</span>
        </button>
      </div>
    </div>

    <div>
      <hr class="hr my-1">
      <div
          class="ps-6 pe-2 py-2 flex items-center no-underline justify-between">

        <div class="flex items-center" style="min-width: 0;">
          <i class="fa-solid fa-circle-user text-subtle"></i>

          <strong class="mx-2 text-subtle truncate sidebar-invisible">
            {% if user.first_name and user.last_name %}
              {{ user.first_name }} {{ user.last_name }}
            {% else %}
              {{ user.email }}
            {% endif %}
          </strong>
        </div>

        <div class="sidebar-invisible flex flex-row gap-2">
          {% include 'includes/navbar/user_menu.html' %}
        </div>

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

  <div
      class="hidden lg:group-hover:block absolute top-0 left-104 w-16 h-full bg-transparent"></div>
</div>