diff --git a/hypha/templates/includes/user_menu.html b/hypha/templates/includes/user_menu.html index baf5a0bb355eb0a49e1bd6fd6831f30fe00d4dd6..3f0b54930b99d42fc5ce85bc1153d1a3c70d7361 100644 --- a/hypha/templates/includes/user_menu.html +++ b/hypha/templates/includes/user_menu.html @@ -2,33 +2,69 @@ {% if request.user.is_authenticated %} <div x-data="{ show: false }" class="relative flex"> - <button x-on:click="show = ! show" class="font-bold flex items-center ps-1 pe-4 hover:bg-black hover:text-white transition-colors rounded-sm" type="button"> + <button + x-on:click="show = ! show" + class="font-bold flex items-center ps-1 pe-4 hover:bg-black hover:text-white transition-colors rounded-sm" + 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-40 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> + <div + x-cloak + 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="pe-4 py-3 block text-black ps-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> + <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="ms-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> + <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 %}