diff --git a/hypha/apply/funds/templates/submissions/all.html b/hypha/apply/funds/templates/submissions/all.html
index b1adaadeb6..63a45ae3a9 100644
--- a/hypha/apply/funds/templates/submissions/all.html
+++ b/hypha/apply/funds/templates/submissions/all.html
@@ -262,7 +262,7 @@
<header
hx-target="#main"
hx-swap="outerHTML show:top"
- class="sticky top-0 z-10 mt-3 px-3 py-2 flex flex-wrap items-center justify-between border-x border-t md:gap-5 bg-gray-50 md:text-sm md:font-medium border-gray-200"
+ class="sticky top-0 z-[5] mt-3 px-3 py-2 flex flex-wrap items-center justify-between border-x border-t md:gap-5 bg-gray-50 md:text-sm md:font-medium border-gray-200"
>
<span class="hidden md:inline-flex items-center py-1">
<input
diff --git a/hypha/core/navigation.py b/hypha/core/navigation.py
index 7b3382ea09..0b036c5770 100644
--- a/hypha/core/navigation.py
+++ b/hypha/core/navigation.py
@@ -1,56 +1,60 @@
from django.conf import settings
+from django.urls import reverse_lazy
+from django.utils.translation import gettext_lazy as _
nav_items = [
{
- "title": "My Dashboard",
- "url": "dashboard:dashboard",
+ "title": _("My Dashboard"),
+ "url": reverse_lazy("dashboard:dashboard"),
"permission_method": "has_dashboard_access",
},
{
- "title": "Submissions",
- "url": "apply:submissions:overview", # kind of basic url to figure out active tab
+ "title": _("Submissions"),
+ # kind of basic url to figure out active tab
+ "url": reverse_lazy("apply:submissions:overview"),
"permission_method": "is_apply_staff_or_reviewer_required",
"sub_items": [
{
- "title": "All Submissions",
- "url": "apply:submissions:list",
+ "title": _("All Submissions"),
+ "url": reverse_lazy("apply:submissions:list"),
"permission_method": "is_apply_staff_or_reviewer_required",
},
{
- "title": "Staff Assignments",
- "url": "apply:submissions:staff_assignments",
+ "title": _("Staff Assignments"),
+ "url": reverse_lazy("apply:submissions:staff_assignments"),
"permission_method": "is_apply_staff",
},
{
- "title": "Reviews",
- "url": "apply:submissions:reviewer_leaderboard",
+ "title": _("Reviews"),
+ "url": reverse_lazy("apply:submissions:reviewer_leaderboard"),
"permission_method": "is_apply_staff",
},
{
- "title": "Results",
- "url": "apply:submissions:result",
+ "title": _("Results"),
+ "url": reverse_lazy("apply:submissions:result"),
"permission_method": "is_apply_staff",
},
],
},
{
- "title": "Projects",
- "url": "apply:projects:overview", # kind of basic url to figure out active tab
+ "title": _("Projects"),
+ # kind of basic url to figure out active tab
+ "url": reverse_lazy("apply:projects:overview"),
"permission_method": "is_apply_staff_or_finance_or_contracting",
"sub_items": [
{
- "title": "All Projects",
- "url": "apply:projects:all",
+ "title": _("All Projects"),
+ "url": reverse_lazy("apply:projects:all"),
"permission_method": "is_apply_staff_or_finance_or_contracting",
},
{
- "title": "Invoices",
- "url": "apply:projects:invoices",
+ "title": _("Invoices"),
+ "url": reverse_lazy("apply:projects:invoices"),
"permission_method": "is_apply_staff_or_finance",
},
{
- "title": "Reports",
- "url": "apply:projects:reports:all",
+ "title": _("Reports"),
+ "url": reverse_lazy("apply:projects:reports:all"),
"permission_method": "is_apply_staff_or_finance",
},
],
diff --git a/hypha/core/templates/core/navigation/primarynav-apply.html b/hypha/core/templates/core/navigation/primarynav-apply.html
index 03c005f856..176b4e8f11 100644
--- a/hypha/core/templates/core/navigation/primarynav-apply.html
+++ b/hypha/core/templates/core/navigation/primarynav-apply.html
@@ -4,30 +4,62 @@
<ul class="nav nav--primary" role="menubar">
{% apply_nav_items request.user as nav_items %}
{% for item in nav_items %}
- {% url item.url as target_url%}
- <li class="nav__item" role="presentation">
+ <li class="nav__item"
+ role="presentation"
+ x-data="{open: false}"
+ x-on:mouseover.away="open = false"
+ >
{% if item.sub_items %}
- <div class="relative inline-block" x-data="{open: false}">
- <a class="nav__link {% if target_url in request.path %}nav__link--active{% endif %}"
- href="{% url item.url %}"
+ <div class="relative inline-block">
+ <a class="nav__link {% if item.url in request.path %}nav__link--active{% endif %}"
+ href="{{item.url}}"
aria-label="{% trans "Menu Item" %}"
aria-haspopup="menu"
aria-expanded="false"
role="menuitem"
+ @mouseover="open = true"
@click.prevent="open = ! open">
{{ item.title }}
- {% heroicon_outline "chevron-down" aria_hidden="true" size=16 stroke_width=3 class="inline align-baseline mr-1" %}
+ <span :class="open ? '[&>svg]:translate-y-1': ''">
+ {% heroicon_outline "chevron-down" aria_hidden="true" size=16 stroke_width=3 class="inline align-baseline mr-1 transition-transform" %}
+ </span>
</a>
- <div x-cloak x-trap="open" x-on:keydown.escape="open = false" x-show="open" x-transition @click.outside="open = false" class="absolute block bg-white min-w-max shadow-lg z-1 mt-7 ">
+ <div
+ x-cloak
+ x-trap.noautofocus="open"
+ x-on:keydown.escape="open = false"
+ x-show="open"
+ x-transition:enter="transition ease-out duration-250"
+ x-transition:enter-start="transform opacity-0 scale-95 -translate-y-3"
+ x-transition:enter-end="transform opacity-100 scale-100 translate-y-0"
+ x-transition:leave="transition ease-in duration-75"
+ x-transition:leave-start="transform opacity-100 scale-100 translate-y-0"
+ x-transition:leave-end="transform opacity-0 scale-95 -translate-y-3"
+ {% comment %} x-transition {% endcomment %}
+ @click.outside="open = false"
+ class="min-w-48 absolute block bg-white shadow-xl z-20 mt-4 border-y rounded-sm"
+ >
{% for sub_item in item.sub_items %}
- <a class="text-black px-4 py-3 block font-normal hover:bg-mid-grey focus-visible:ring-2" href="{% url sub_item.url %}">
+ <a
+ href="{{ sub_item.url }}"
+ class="pr-4 py-3 block font-normal hover:bg-slate-100
+ focus-visible:outline-dashed outline-1 transition-colors
+ {% if sub_item.url == request.path %}
+ border-l-dark-blue bg-slate-100 pl-3 border-l-4 border-r text-dark-blue font-semibold
+ {% else %}
+ border-x pl-4 text-black hover:text-dark-blue hover:font-semibold
+ {% endif %}"
+ >
{{ sub_item.title }}
</a>
{% endfor %}
</div>
</div>
{% else %}
- <a class="nav__link {% if target_url in request.path %}nav__link--active{% endif %}" href="{{ target_url }}" role="menuitem">
+ <a class="nav__link {% if item.url in request.path %}nav__link--active{% endif %}"
+ href="{{ item.url }}"
+ role="menuitem"
+ >
{{ item.title }}
</a>
{% endif %}