feat: improve navbar settings and other stuff

app/templates/includes/navbar.html

@@ -45,15 +45,7 @@
                   </ul>
                 </li>
             </ul>
-            {% spaceless %}
-            <a class="mx-3 tw-text-2xl" hx-get="{% url 'toggle_amount_visibility' %}">
-              {% if user.settings.hide_amounts %}
-                <i class="fa-solid fa-eye-slash fa-fw"></i><div id="settings-hide-amounts" class="d-inline tw-invisible"></div>
-              {% else %}
-                <i class="fa-solid fa-eye fa-fw"></i>
-              {% endif %}</a>
-            {% endspaceless %}
-            <a class="btn btn-outline-light btn-sm" href="{% url 'logout' %}"><i class="fa-solid fa-door-open me-2"></i>{% translate 'Logout' %}</a>
+          {% include 'includes/navbar/user_menu.html' %}
         </div>
     </div>
 </nav>

app/templates/includes/navbar/user_menu.html

@@ -0,0 +1,29 @@
+{% load i18n %}
+{#<a class="" href=""></i></a>#}
+
+<div class="dropdown">
+  <a class="tw-text-2xl" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+    <i class="fa-solid fa-user"></i>
+  </a>
+  <ul class="dropdown-menu dropdown-menu-start dropdown-menu-lg-end">
+    <li><a class="dropdown-item"
+           hx-get="{% url 'user_settings' %}"
+           hx-target="#generic-offcanvas">
+      <i class="fa-solid fa-gear me-2 fa-fw"></i>{% translate 'Settings' %}</a></li>
+    <li><hr class="dropdown-divider"></li>
+    {% spaceless %}
+    <li>
+      <a class="dropdown-item" hx-get="{% url 'toggle_amount_visibility' %}" role="button">
+        {% if user.settings.hide_amounts %}
+        {% include 'users/generic/show_amounts.html' %}
+        {% else %}
+        {% include 'users/generic/hide_amounts.html' %}
+        {% endif %}
+      </a>
+    {% endspaceless %}
+    </li>
+    <li><hr class="dropdown-divider"></li>
+    <li><a class="dropdown-item" href="{% url 'logout' %}"><i class="fa-solid fa-door-open me-2 fa-fw"></i
+    >{% translate 'Logout' %}</a></li>
+  </ul>
+</div>

app/templates/users/fragments/user_settings.html

@@ -0,0 +1,11 @@
+{% extends 'extends/offcanvas.html' %}
+{% load i18n %}
+{% load crispy_forms_tags %}
+
+{% block title %}{% translate 'User Settings' %}{% endblock %}
+
+{% block body %}
+<form hx-post="{% url 'user_settings' %}" hx-target="#generic-offcanvas" novalidate>
+    {% crispy form %}
+</form>
+{% endblock %}

app/templates/users/generic/hide_amounts.html

@@ -0,0 +1,2 @@
+{% load i18n %}
+<i class="fa-solid fa-eye-slash me-2 fa-fw"></i>{% translate 'Hide amounts' %}

app/templates/users/generic/show_amounts.html

@@ -0,0 +1,3 @@
+{% load i18n %}
+<i class="fa-solid fa-eye me-2 fa-fw"></i>
+<span id="settings-hide-amounts" class="d-inline tw-invisible"></span>{% translate 'Show amounts' %}