-
-
Notifications
You must be signed in to change notification settings - Fork 9
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
5 changed files
with
267 additions
and
0 deletions.
There are no files selected for viewing
4 changes: 4 additions & 0 deletions
4
resources/stubs/presets/mega_menu/content/navigation/main.yaml.stub
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 |
|---|---|---|
| @@ -0,0 +1,4 @@ | ||
| title: Main | ||
| collections: | ||
| - pages | ||
| max_depth: 3 |
42 changes: 42 additions & 0 deletions
42
resources/stubs/presets/mega_menu/resources/blueprints/navigation/main.yaml.stub
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 |
|---|---|---|
| @@ -0,0 +1,42 @@ | ||
| tabs: | ||
| main: | ||
| display: Main | ||
| sections: | ||
| - | ||
| display: General | ||
| fields: | ||
| - | ||
| handle: description | ||
| field: | ||
| antlers: true | ||
| type: textarea | ||
| display: Description | ||
| character_limit: '75' | ||
| validate: | ||
| - 'max:75' | ||
| if: | ||
| depth: '> 2' | ||
| - | ||
| handle: html_depth_1 | ||
| field: | ||
| html: '<p class="text-sm">Items on this depth will either be rendered as links or toggle''s for a mega-menu style dropdown.</p>' | ||
| type: html | ||
| display: 'Depth 1' | ||
| if: | ||
| depth: 'equals 1' | ||
| - | ||
| handle: html_depth_2 | ||
| field: | ||
| html: '<p class="text-sm">Items on this depth will be rendered as a section header and <i>not</i> as a link.</p>' | ||
| type: html | ||
| display: 'Depth 2' | ||
| if: | ||
| depth: 'equals 2' | ||
| - | ||
| handle: html_depth_3 | ||
| field: | ||
| html: '<p class="text-sm">Items on this depth will be rendered as actual links with a description.</p>' | ||
| type: html | ||
| display: 'Depth 3' | ||
| if: | ||
| depth: 'equals 3' |
92 changes: 92 additions & 0 deletions
92
resources/stubs/presets/mega_menu/resources/views/navigation/_main_desktop.antlers.html.stub
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 |
|---|---|---|
| @@ -0,0 +1,92 @@ | ||
| {{# | ||
| @name Main desktop navigation | ||
| @desc The sites main desktop navigation rendered on each page. It's 2 levels deep by default and uses AlpineJS for interactivity. | ||
| #}} | ||
|
|
||
| <!-- /navigation/_main_desktop.antlers.html --> | ||
| <nav class="hidden md:block" aria-label="{{ trans:strings.main_navigation }}"> | ||
| <ul class="h-full relative flex justify-center items-stretch gap-4 lg:gap-8"> | ||
| {{ nav:main max_depth="3" select="title|url|description|action_link" }} | ||
| {{ unless no_results }} | ||
| <li | ||
| {{ if children }} | ||
| x-data="{ subnavOpen: false }" | ||
| @keyup.escape.stop.prevent="subnavOpen = false" | ||
| @focusin.window="!$refs.subnav.contains($event.target) && (subnavOpen = false)" | ||
| {{ /if }} | ||
| class="leading-none" | ||
| > | ||
| <a | ||
| class=" | ||
| h-full flex items-center text-sm font-bold whitespace-nowrap | ||
| {{ is_current || is_parent | ||
| ? 'text-primary' | ||
| : 'text-neutral hover:text-primary' | ||
| }} | ||
| " | ||
| {{ if children }} | ||
| href="#" | ||
| @click.prevent="subnavOpen = !subnavOpen" | ||
| :aria-label="subnavOpen | ||
| ? '{{ trans:strings.subnav_close }}' | ||
| : '{{ trans:strings.subnav_open }}'" | ||
| :aria-expanded="subnavOpen" | ||
| {{ else }} | ||
| href="{{ url }}" | ||
| {{ /if }} | ||
| {{ is_current ?= 'aria-current="page"' }} | ||
| > | ||
| <span> | ||
| {{ title }} | ||
| </span> | ||
|
|
||
| {{ if children }} | ||
| <div :class="{ 'scale-y-[-1]': subnavOpen }" class="motion-safe:transition-transform"> | ||
| {{ svg:chevron_down attr:class="w-2 ml-1 overflow-visible stroke-current" attr:aria-hidden="true" }} | ||
| </div> | ||
| {{ /if }} | ||
| </a> | ||
|
|
||
| {{ if children }} | ||
| <ul | ||
| x-show="subnavOpen" | ||
| x-ref="subnav" | ||
| class="absolute right-0 mt-2 pt-8 px-4 pb-4 flex gap-10 bg-white border border-neutral/10 shadow-lg rounded origin-top-right motion-safe:transition motion-safe:duration-200" | ||
| @click.outside="subnavOpen = false" | ||
| x-transition:enter="ease-out" | ||
| x-transition:enter-start="opacity-0 scale-90" | ||
| x-transition:enter-end="opacity-100 scale-100" | ||
| x-transition:leave="ease-in" | ||
| x-transition:leave-start="opacity-100 scale-100" | ||
| x-transition:leave-end="opacity-0 scale-90" | ||
| x-cloak | ||
| > | ||
| {{ children }} | ||
| <div class="relative stack-3"> | ||
| <h2 class="pl-4 text-neutral text-xs uppercase font-bold tracking-wider">{{ title }}</h2> | ||
|
|
||
| {{ _total = children | count }} | ||
| <div class="{{ _total > 3 ? 'lg:columns-2 gap-2' : 'columns-1' }}"> | ||
| {{ children }} | ||
| <div class="break-inside-avoid-column mb-10 w-56 h-12"> | ||
| <a class="inline-block stack-0.5 p-4 h-20 w-full hover:bg-neutral/10 rounded-md text-neutral motion-safe:transition-colors {{ is_current ?= 'bg-neutral/10' }}" href="{{ url }}" {{ is_current ?= 'aria-current="page"' }}> | ||
| <h3 class="text-sm line-clamp-1">{{ title }}</h3> | ||
| <p class="text-xs line-clamp-2">{{ description }}</p> | ||
| </a> | ||
| </div> | ||
| {{ /children }} | ||
| </div> | ||
|
|
||
| {{ if next }} | ||
| <div class="absolute stack-space-0 -right-5 top-0 bottom-0 w-[1.5px] bg-neutral/10" aria-hidden="true"></div> | ||
| {{ /if }} | ||
| </div> | ||
| {{ /children }} | ||
| </ul> | ||
| {{ /if }} | ||
| </li> | ||
| {{ /unless }} | ||
| {{ /nav:main }} | ||
| </ul> | ||
| </nav> | ||
| <!-- End: /navigation/_main_desktop.antlers.html --> |
94 changes: 94 additions & 0 deletions
94
resources/stubs/presets/mega_menu/resources/views/navigation/_main_mobile.antlers.html.stub
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 |
|---|---|---|
| @@ -0,0 +1,94 @@ | ||
| {{# | ||
| @name Main mobile navigation | ||
| @desc The sites main mobile navigation rendered on each page. It's 2 levels deep by default and uses AlpineJS for interactivity. | ||
| #}} | ||
|
|
||
| <!-- /navigation/_main_mobile.antlers.html --> | ||
| <nav | ||
| x-data="{ mobileNavOpen: false }" | ||
| class="md:hidden" | ||
| aria-label="{{ trans:strings.main_navigation }}" | ||
| x-trap.inert.noscroll.noautofocus="mobileNavOpen" | ||
| @keyup.escape.stop.prevent="mobileNavOpen = false" | ||
| x-cloak | ||
| > | ||
| <button | ||
| @click.prevent.stop="mobileNavOpen = !mobileNavOpen" | ||
| class="fixed bottom-0 right-0 z-30 flex items-center justify-center w-16 h-16 mr-8 text-xs font-bold text-white mb-safe rounded-sm bg-primary" | ||
| :aria-label="mobileNavOpen ? '{{ trans:strings.nav_close }}' : '{{ trans:strings.nav_open }}'" | ||
| :aria-expanded="mobileNavOpen" | ||
| x-text="mobileNavOpen ? '{{ trans:strings.close }}' : '{{ trans:strings.menu }}'" | ||
| ></button> | ||
|
|
||
| <div | ||
| class="fixed inset-0 z-20 pt-8 px-8 pb-12 flex flex-col justify-end bg-white" | ||
| x-show="mobileNavOpen" | ||
| x-transition.origin.bottom.right | ||
| > | ||
| <ul class="flex flex-col py-2 gap-y-4 overflow-auto"> | ||
| {{ nav:main max_depth="3" include_home="true" select="title|url" }} | ||
| {{ unless no_results }} | ||
| <li | ||
| {{ if children }} | ||
| x-data="{ subnavOpen: $root.querySelector('[aria-current=page]') ? true : false }" | ||
| @focusin.window="!$refs.subnav.contains($event.target) && (subnavOpen = false)" | ||
| {{ /if }} | ||
| class="leading-none" | ||
| > | ||
| <a | ||
| class=" | ||
| w-full py-2 flex items-center gap-x-1 text-lg font-bold hover:text-primary | ||
| {{ is_current || is_parent ? 'text-primary' : 'text-neutral' }} | ||
| " | ||
| {{ if children }} | ||
| href="#" | ||
| @click.prevent="subnavOpen = !subnavOpen" | ||
| @click.outside="subnavOpen = false" | ||
| :aria-label="subnavOpen ? '{{ trans:strings.subnav_close }}' : '{{ trans:strings.subnav_open }}'" | ||
| :aria-expanded="subnavOpen" | ||
| {{ else }} | ||
| href="{{ url }}" | ||
| {{ /if }} | ||
| {{ is_current ?= 'aria-current="page"' }} | ||
| > | ||
| <span>{{ title }}</span> | ||
|
|
||
| {{ if children }} | ||
| <div :class="{ 'scale-y-[-1]': subnavOpen }" class="motion-safe:transition-transform"> | ||
| {{ svg:chevron_down attr:class="w-2 ml-1 overflow-visible stroke-current text-neutral" attr:aria-hidden="true" }} | ||
| </div> | ||
| {{ /if }} | ||
| </a> | ||
|
|
||
| {{ if children }} | ||
| <ul | ||
| x-show="subnavOpen" | ||
| x-ref="subnav" | ||
| class="flex flex-col items-stretch gap-y-2 py-2 px-4" | ||
| x-collapse | ||
| > | ||
| {{ children }} | ||
| {{ children }} | ||
| <li> | ||
| <a | ||
| class=" | ||
| block py-2 whitespace-nowrap font-bold hover:text-primary | ||
| {{ is_current || is_parent ? 'text-primary' : 'text-neutral' }} | ||
| " | ||
| href="{{ url }}" | ||
| {{ is_current ?= 'aria-current="page"' }} | ||
| > | ||
| {{ title }} | ||
| </a> | ||
| </li> | ||
| {{ /children }} | ||
| {{ /children }} | ||
| </ul> | ||
| {{ /if }} | ||
| </li> | ||
| {{ /unless }} | ||
| {{ /nav:main }} | ||
| </ul> | ||
| </div> | ||
| </nav> | ||
| <!-- End: /navigation/_main_mobile.antlers.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