forked from HyphaApp/hypha
-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
New mobile menu and sync Hypha media-query breakpoints with tailwind (H…
…yphaApp#3994) Fixes HyphaApp#3993 Co-authored-by: Saurabh Kumar <[email protected]>
- Loading branch information
Showing
54 changed files
with
457 additions
and
637 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
157 changes: 89 additions & 68 deletions
157
hypha/core/templates/core/navigation/primarynav-apply.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,71 +1,92 @@ | ||
| {% load i18n apply_tags heroicons %} | ||
|
|
||
| {% if request.user.is_authenticated %} | ||
| <nav role="navigation" aria-label="Primary" class="w-full"> | ||
| <ul class="nav nav--primary" role="menubar"> | ||
| {% primary_navigation_items request.user as nav_items %} | ||
| {% for item in nav_items %} | ||
| <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"> | ||
| <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 }} | ||
| <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.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" | ||
| <nav | ||
| aria-label="Primary" | ||
| x-show="showDesktopMenu || isDesktop" | ||
| x-transition:enter="transition ease-out duration-250" | ||
| x-transition:enter-start="transform opacity-0 translate-x-full" | ||
| x-transition:enter-end="transform opacity-100 translate-x-0" | ||
| x-transition:leave="transition ease-in duration-150" | ||
| x-transition:leave-start="transform opacity-100 translate-x-0" | ||
| x-transition:leave-end="transform opacity-0 translate-x-full" | ||
| class="fixed md:static pt-10 md:pt-0 top-0 md:top-auto end-0 bottom-0 bg-white z-20 md:z-10 shadow-xl md:shadow-none overflow-y-auto md:overflow-clip" | ||
| > | ||
| <!-- Mobile Menu Opener --> | ||
| <button | ||
| class="absolute top-6 end-4 md:hidden border rounded p-1.5 z-30 hover:bg-slate-100 transition-colors" | ||
| @click="showDesktopMenu = false" | ||
| > | ||
| {% heroicon_outline "x-mark" aria_hidden="true" size=24 stroke_width=3 class="inline" %} | ||
| </button> | ||
|
|
||
| <!-- Menu --> | ||
| {% primary_navigation_items request.user as nav_items %} | ||
| <ul class="flex flex-col md:gap-8 p-4 md:p-0 md:flex-row" role="menubar"> | ||
| {% for item in nav_items %} | ||
| <li | ||
| role="presentation" | ||
| x-data="{open: false}" | ||
| class="p-0.5" | ||
| x-on:mouseover.away="open = false" | ||
| > | ||
| {% if item.sub_items %} | ||
| <a class="nav__link {% if item.url == request. %}nav__link--active{% endif %} has-[> .nav__link--active]:border" | ||
| 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 }} | ||
|
|
||
| <span class="hidden md:block" :class="open ? '[&>svg]:translate-y-0.5': ''"> | ||
| {% heroicon_outline "chevron-down" aria_hidden="true" size=16 stroke_width=3 class="inline align-baseline ms-1 transition-transform" %} | ||
| </span> | ||
| </a> | ||
|
|
||
| <!-- Submenu --> | ||
| <div | ||
| role="presentation" | ||
| x-cloak | ||
| x-trap.noautofocus="open" | ||
| x-on:keydown.escape="open = false" | ||
| x-show="open || !isDesktop" | ||
| 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" | ||
| @click.outside="open = false" | ||
| class="min-w-48 relative md:absolute block bg-white md:shadow-xl z-20 md:border-y rounded-sm" | ||
| > | ||
| {% for sub_item in item.sub_items %} | ||
| <a | ||
| href="{{ sub_item.url }}" | ||
| role="menuitem" | ||
| class="pr-4 py-2 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-l md:border-r pl-4 text-black hover:text-dark-blue hover:font-semibold | ||
| {% endif %}" | ||
| > | ||
| {% for sub_item in item.sub_items %} | ||
| <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 item.url in request.path %}nav__link--active{% endif %}" | ||
| href="{{ item.url }}" | ||
| role="menuitem" | ||
| > | ||
| {{ item.title }} | ||
| </a> | ||
| {% endif %} | ||
| </li> | ||
| {% endfor %} | ||
| </ul> | ||
| </nav> | ||
| {% endif %} | ||
| {{ sub_item.title }} | ||
| </a> | ||
| {% endfor %} | ||
| </div> | ||
| {% else %} | ||
| <a class="nav__link {% if item.url == request.path %}nav__link--active{% endif %}" | ||
| href="{{ item.url }}" | ||
| role="menuitem" | ||
| > | ||
| {{ item.title }} | ||
| </a> | ||
| {% endif %} | ||
| </li> | ||
| {% endfor %} | ||
| </ul> | ||
| </nav> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.