Add user menu as a dropdown (#3943)

Fixes #3888 


Co-authored-by: Fredrik Jonsson <frjo@xdeb.org>

hypha/templates/base-apply.html

@@ -49,7 +49,7 @@
                     </button>
                 {% else %}
                     {% if request.path != '/auth/' and request.path != '/login/' %}
-                        {% include "includes/login_button.html" %}
+                        {% include "includes/user_menu.html" %}
                     {% endif %}
                 {% endif %}
             </div>
@@ -100,7 +100,7 @@
                 {% endif %}
             </section>
 
-            <div class="header__button-container flex gap-4">
+            <div class="header__button-container flex h-10 gap-4">
                 {% comment %} Todo List {% endcomment %}
                 {% if request.user.is_authenticated and request.user.is_apply_staff %}
                     <div
@@ -154,13 +154,7 @@
                 {% comment %} Todo List End{% endcomment %}
 
                 {% if request.path != '/auth/' and request.path != '/login/' %}
-                    {% include "includes/login_button.html" %}
-                {% endif %}
-
-                {% if request.user.is_authenticated %}
-                    <a href="{% url 'users:logout' %}" class="button button--transparent button--narrow">
-                        {% trans "Log out" %}
-                    </a>
+                    {% include "includes/user_menu.html" %}
                 {% endif %}
             </div>
         </div>

hypha/templates/includes/login_button.html

-{% load i18n heroicons %}
-
-{% if request.user.is_authenticated %}
-    {% if request.path == "/" and request.user.can_access_dashboard %}
-        <a
-            class="button button--transparent button--narrow {{ class }}"
-            href="{{ APPLY_SITE.root_url }}{% url 'dashboard:dashboard' %}"
-        >
-            {% heroicon_micro "user" class="inline align-text-bottom w-4 h-4 me-1" aria_hidden=true %}
-
-            {% blocktrans %}My {{ ORG_SHORT_NAME }}{% endblocktrans %}
-        </a>
-    {% else %}
-        <a
-            class="button button--transparent button--narrow {{ class }}"
-            href="{{ APPLY_SITE.root_url }}{% url 'users:account' %}"
-            title="Goto your account"
-        >
-            {% heroicon_micro "user" class="inline align-text-bottom w-4 h-4 me-1" aria_hidden=true %}
-            {{ request.user }}
-        </a>
-    {% endif %}
-{% else %}
-    <a
-        class="button button--transparent button--narrow {{ class }}"
-        href="{{ APPLY_SITE.root_url }}{% url 'users:passwordless_login_signup' %}{% if redirect_url %}?next={{ redirect_url }}{% endif %}"
-    >
-        {% heroicon_micro "user" class="inline align-text-bottom w-4 h-4 me-1" aria_hidden=true %}
-        {% trans "Log in" %} {% if ENABLE_PUBLIC_SIGNUP %} {% trans " or Sign up" %} {% endif %}
-    </a>
-{% endif %}

hypha/templates/includes/user_menu.html

+{% load i18n heroicons %}
+
+{% if request.user.is_authenticated %}
+    <div x-data="{ show: false }" class="relative flex">
+        <button x-on:click="show = ! show" class="button button--narrow font-bold text-center flex items-center justify-center px-2 hover:bg-black hover:text-white active:bg-black active:text-white focus:bg-black focus:text-white" type="button">
+            {% heroicon_micro "user-circle" class="inline align-text-bottom w-8 h-8 me-1" aria_hidden=true %}
+            <span>{{ request.user }}</span>
+        </button>
+        <div x-show="show" x-transition @click.outside="show = false" class="min-w-36 absolute block bg-white shadow-xl z-20 border-y rounded-sm end-0 top-10">
+            <a href="{% url 'users:account' %}" title="Goto your account" class="pr-4 py-3 block text-black pl-3
+                                                                                 focus-visible:outline-dashed outline-1 transition-colors border-r
+                                                                                 hover:bg-slate-100 hover:text-dark-blue hover:font-semibold">
+                {% trans 'My account' %}</a>
+            {% if request.user.is_apply_staff %}
+                <a href="{% url 'activity:notifications' %}" title="Check latest notifications" class="pr-4 py-3 block text-black pl-3
+                                                                                                       focus-visible:outline-dashed outline-1 transition-colors border-r
+                                                                                                       hover:bg-slate-100 hover:text-dark-blue hover:font-semibold">
+                    {% trans "Activity feed" %}</a>
+                <a href="{% url "apply:submissions:list-alt" %}?query=flagged:@me" title="Goto your flagged submissions" class="pr-4 py-3 block text-black pl-3
+                                                                                                                                focus-visible:outline-dashed outline-1 transition-colors border-r
+                                                                                                                                hover:bg-slate-100 hover:text-dark-blue hover:font-semibold">
+                    {% trans "My flagged" %}</a>
+                <a href="{% url 'wagtailadmin_home' %}" title="Goto wagtail admin" class="pr-4 py-3 block text-black pl-3
+                                                                                          focus-visible:outline-dashed outline-1 transition-colors border-r
+                                                                                          hover:bg-slate-100 hover:text-dark-blue hover:font-semibold">
+                    {% trans "Admin" %}{% heroicon_micro "wrench-screwdriver" class="ml-2 inline align-text-bottom" %}</a>
+            {% endif %}
+            <a href="{% url 'users:logout' %}" title="Log out" class="pr-4 py-3 block text-black pl-3 focus-visible:outline-dashed
+                                                                      outline-1 transition-colors border-r
+                                                                      hover:bg-slate-100 hover:text-dark-blue hover:font-semibold">
+                {% trans "Log out" %}</a>
+        </div>
+    </div>
+{% else %}
+    <a
+        class="button button--transparent button--narrow"
+        href="{{ APPLY_SITE.root_url }}{% url 'users:passwordless_login_signup' %}{% if redirect_url %}?next={{ redirect_url }}{% endif %}"
+    >
+        {% heroicon_micro "user" class="inline align-text-bottom w-4 h-4 me-1" aria_hidden=true %}
+        {% trans "Log in" %} {% if ENABLE_PUBLIC_SIGNUP %} {% trans " or Sign up" %} {% endif %}
+    </a>
+{% endif %}