Add dropdowns to navigation and access nav items via file

[sandeepsajan0]

Fixes #3670

• Added a code setting file to define the nav item.
• Use the dropdown to show nav item categories.
• Add user role permissions to nav items and categories.
• Make dropdowns accessible.

[frjo]

I think we should add x-trap="open" and perhaps also x-on:keydown.escape.window="open = false".

The first will trap focus inside the drop down and the other allow "esc" to close the dropdown.

[frjo]

Could we here check if there is a setting that overrides the "categories" for submissions and project menu items?

Something like:

if settings.MENU_SUBMISSIONS_SUBITEMS:
    nav_items[1]["categories"] = settings.MENU_SUBMISSIONS_SUBITEMS

Or are there better solutions? I want it to be easy for a developer to add/change/maintain the menu subitems.

[sandeepsajan0]

@frjo Now it can be easily managed via settings. We just have to pass a compact JSON in the env variable.
Like: APPLY_NAV_SUBMISSIONS_ITEMS='[{"title":"All Submissions","url":"apply:submissions:list","permission_method":"is_apply_staff_or_reviewer_required"},{"title":"Staff Assignments","url":"apply:submissions:staff_assignments","permission_method":"is_apply_staff"},{"title":"Reviews","url":"apply:submissions:reviewer_leaderboard","permission_method":"is_apply_staff"},{"title":"Results","url":"apply:submissions:result","permission_method":"is_apply_staff"}]'

[frjo]

Works really well. Some minor issues I found.

1. A small black triangle or similar on items with a drop down is a nice indication to the users I think.
2. The selects have z-index: 99995; // to override any modals set to come out on top.
3. I think we can remove this from all the views since it is now part of the drop down.
4. The blue focus ring on "All submissions" does not look so nice. Focus indications are important for accessibility but can we use the recent :focus-visible instead of :focus? That way focus only show up when needed (keyboard navigation etc.) https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible

[wes-otf]

@sandeepsajan0 the testers said that all looked good besides z-index, the menus were still getting caught behind items with a higher index:

all good otherwise!

[sandeepsajan0]

@frjo I have fixed the nav dropdown stacking issue here but just not sure if it is messing with any other UI component.

[frjo]

@sandeepsajan0 Excellent work on fixing the z-index issue!

[frjo]

@sandeepsajan0 Item 4 (focus outline) from #3679 (comment), did you not fix that at one point? I see it again now.

Very minor issue that we can fix at a later stage as well.

[frjo]

@sandeepsajan0 Added a commit that makes the new drop down menu active on front page as well. Looks ok?

[sandeepsajan0]

Yes, it looks good. It should be there.
I added focus-visible but I'll check again for its outline.