Skip to content

Commit

Permalink
[#51] Nav styling changes
Browse files Browse the repository at this point in the history
  • Loading branch information
@joshuapease
joshuapease committed Oct 7, 2024
1 parent 5233944 commit 02e2624
Show file tree
Hide file tree
Showing 4 changed files with 154 additions and 143 deletions.
2 changes: 2 additions & 0 deletions templates/_partials/footer.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,8 @@
name: 'logo-mark',
size: 'lg',
}) }}

<span class="sr-only">{{ currentSite.name }} - Home</span>
</a>
</div>

Expand Down
36 changes: 6 additions & 30 deletions templates/_partials/header.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,35 +17,11 @@
'border-b border-neutral-200 bg-neutral-100',
'mdd:sticky mdd:top-0 mdd:z-50 mdd:bg-white mdd:shadow-md',
) }}">
<div class="container flex items-center justify-between">
{{ include('_partials/nav-desktop.twig', {
nodes: primaryNavigation,
}) }}

{# The logo changes when you open the mobile nav. Just because it's rad. #}
<a
href="{{ url('/') }}"
class="relative z-10 transition-colors duration-700 text-neutral-500"
:class="swapColor && '!text-amber-600'"
x-data="{
swapColor: false,
}"
@nav-mobile-toggle.window="swapColor = $event.detail.isOpen"
>
{{ icon({
name: 'logo-primary',
size: 'none',
class: 'w-[186px] h-32',
}) }}

<span class="sr-only">{{ currentSite.name }} - Home</span>
</a>

{{ include('_partials/nav-desktop.twig', {
class: 'hidden md:block',
nodes: primaryNavigation,
}) }}

{{ include('_partials/nav-mobile.twig', {
class: 'md:hidden',
nodes: primaryNavigation,
}) }}
</div>
{{ include('_partials/nav-mobile.twig', {
nodes: primaryNavigation,
}) }}
</header>
182 changes: 96 additions & 86 deletions templates/_partials/nav-desktop.twig
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,5 @@
{% from "_macros/icon.twig" import icon %}


{# @var string|null class #}
{% set class = class ?? null %}

{# @var \Illuminate\Support\Collection<verbb\navigation\elements\Node> nodes #}
{% set nodes = nodes ?? collect([]) %}

Expand Down Expand Up @@ -38,92 +34,106 @@
{% endmacro %}

<nav
class="{{ class }}"
x-data="nav"
@keyup.escape.window="popStack(1)"
@keydown.tab="handleTab($refs.subnav)"
class="container flex flex-wrap items-center justify-between mdd:hidden"
aria-label="Site Navigation"
x-data="nav"
@keyup.escape.window="popStack(1)"
@keydown.tab="handleTab($refs.subnav)"
>
<a
href="{{ url('/') }}"
class="text-neutral-500"
>
<ul class="inline-flex gap-8" @click.outside="resetStack()">
<!-- Creating a scope for refs -->
{% for node in nodes %}
{% set children = node.children.collect() %}
{% set hasChildren = children.count() %}
{% set reverseNavAnchoring = totalNodes - loop.index0 <= 2 %}
{{ icon({
name: 'logo-primary',
size: 'none',
class: 'w-[186px] h-32',
}) }}

<span class="sr-only">{{ currentSite.name }} - Home</span>
</a>

<ul class="inline-flex flex-wrap gap-8" @click.outside="resetStack()">
<!-- Creating a scope for refs -->
{% for node in nodes %}
{% set children = node.children.collect() %}
{% set hasChildren = children.count() %}
{% set reverseNavAnchoring = totalNodes - loop.index0 <= 2 %}

<li class="relative" x-data x-id="['subnav']">
{{ _self.navIem({
node,
hasChildren,
}) }}
<li class="relative" x-data x-id="['subnav']">
{{ _self.navIem({
node,
hasChildren,
}) }}

{% if hasChildren %}
<ul
class="{{ cx('absolute top-full bg-neutral-200 text-nowrap w-[200px] border border-neutral-300', {
'left-0': not reverseNavAnchoring,
'right-0': reverseNavAnchoring,
}) }}"
:id="$id('subnav')"
x-cloak
x-ref="subnav"
x-show="isInStack($refs.subnav)"
x-transition
data-level="{{ node.level }}"
>
{% if hasChildren %}
<ul
class="{{ cx('absolute top-full bg-neutral-200 text-nowrap w-[200px] border border-neutral-300', {
'left-0': not reverseNavAnchoring,
'right-0': reverseNavAnchoring,
}) }}"
:id="$id('subnav')"
x-cloak
x-ref="subnav"
x-show="isInStack($refs.subnav)"
x-transition
data-level="{{ node.level }}"
>

{#
If the root node has a url, render it as a link since the top level element is a <button>
Use the passive node type to prevent this behavior
#}
{% if node.url %}
<li>
{{ _self.navIem({
node: node,
hasChildren: false,
verticalPaddingClass: 'py-8',
}) }}
</li>
{% endif %}
{#
If the root node has a url, render it as a link since the top level element is a <button>
Use the passive node type to prevent this behavior
#}
{% if node.url %}
<li>
{{ _self.navIem({
node: node,
hasChildren: false,
verticalPaddingClass: 'py-8',
}) }}
</li>
{% endif %}

{% for child in children %}
{% set grandchildren = child.children.collect() %}
<li class="relative" x-data x-id="['subnav']">
{% for child in children %}
{% set grandchildren = child.children.collect() %}
<li class="relative" x-data x-id="['subnav']">

{{ _self.navIem({
node: child,
hasChildren: grandchildren.count(),
iconTransitionClass: 'transition-transform -rotate-90 group-aria-expanded:translate-x-4',
verticalPaddingClass: 'py-8',
}) }}
{{ _self.navIem({
node: child,
hasChildren: grandchildren.count(),
iconTransitionClass: 'transition-transform -rotate-90 group-aria-expanded:translate-x-4',
verticalPaddingClass: 'py-8',
}) }}

{% if grandchildren.count() %}
<ul
class="{{ cx('absolute -top-1 bg-neutral-500 border border-neutral-600 text-nowrap p-3', {
'left-full': not reverseNavAnchoring,
'right-full': reverseNavAnchoring,
}) }}"
:id="$id('subnav')"
x-cloak
x-ref="subnav"
x-show="isInStack($refs.subnav)"
x-transition
data-level="{{ child.level }}"
>
{% for grandchild in grandchildren %}
<li>
{{ _self.navIem({
node: grandchild,
textClass: 'text-neutral-100',
verticalPaddingClass: 'py-8',
}) }}
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
</ul>
</nav>
{% if grandchildren.count() %}
<ul
class="{{ cx('absolute -top-1 bg-neutral-500 border border-neutral-600 text-nowrap p-3', {
'left-full': not reverseNavAnchoring,
'right-full': reverseNavAnchoring,
}) }}"
:id="$id('subnav')"
x-cloak
x-ref="subnav"
x-show="isInStack($refs.subnav)"
x-transition
data-level="{{ child.level }}"
>
{% for grandchild in grandchildren %}
<li>
{{ _self.navIem({
node: grandchild,
textClass: 'text-neutral-100',
verticalPaddingClass: 'py-8',
}) }}
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
</ul>
</nav>
77 changes: 50 additions & 27 deletions templates/_partials/nav-mobile.twig
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,5 @@
{% from "_macros/icon.twig" import icon %}


{# @var string|null class #}
{% set class = class ?? null %}

{# @var \Illuminate\Support\Collection<verbb\navigation\elements\Node> nodes #}
{% set nodes = nodes ?? collect([]) %}

Expand Down Expand Up @@ -34,52 +30,79 @@
{% endmacro %}

<nav
class="{{ class }}"
aria-label="Site Navigation"
class="md:hidden"
:style="isOpen ? 'display: block' : ''" {# Keeps the mobile nav open even if the breakpoint changes #}
x-id="['nav-mobile']"
x-data="{
isOpen: false,
toggle() {
$nextTick(() => {
this.isOpen = !this.isOpen;
// Emit an event that our header logo can listen for to change color
$dispatch('nav-mobile-toggle', { isOpen: this.isOpen })
});
},
}"
x-trap.noscroll.inert="isOpen"
@keyup.escape.window="isOpen && toggle()"
>
<button
class="flex py-16 px-8 -mr-8 group relative z-10"
@click="toggle()"
:aria-expanded="isOpen"
:aria-controls="$id('nav-mobile')"

{# Logo and nav toggle button lockup #}
<div
class="container flex items-center justify-between transition-colors duration-300"
:class="isOpen && '!bg-neutral-800'"
>
<div class="flex flex-col justify-between group w-24 h-[18px]">
<span class="h-2 rounded-full bg-gray-600 transition-all duration-300 ease-in-out group-aria-expanded:bg-white group-aria-expanded:rotate-45 group-aria-expanded:translate-y-[8px]"></span>
<span class="h-2 rounded-full bg-gray-600 transition-all duration-300 ease-in-out group-aria-expanded:bg-white group-aria-expanded:opacity-0"></span>
<span class="h-2 rounded-full bg-gray-600 transition-all duration-300 ease-in-out group-aria-expanded:bg-white group-aria-expanded:-rotate-45 group-aria-expanded:-translate-y-[8px]"></span>
</div>
<span class="sr-only">Open Menu</span>
</button>
{# The logo changes when you open the mobile nav. Just because it's rad. #}
<a
href="{{ url('/') }}"
class="relative z-10 transition-colors duration-700 text-neutral-500"
:class="isOpen && '!text-amber-600'"
>
{{ icon({
name: 'logo-primary',
size: 'none',
class: 'w-[186px] h-32',
}) }}

<span class="sr-only">{{ currentSite.name }} - Home</span>
</a>

<button
class="flex py-16 px-8 -mr-8 group relative z-10"
@click="toggle()"
:aria-expanded="isOpen"
:aria-controls="$id('nav-mobile')"
>
<div class="flex flex-col justify-between group w-24 h-[18px]">
<span class="h-2 rounded-full bg-neutral-600 transition-all duration-300 ease-in-out group-aria-expanded:bg-white group-aria-expanded:rotate-45 group-aria-expanded:translate-y-[8px]"></span>
<span class="h-2 rounded-full bg-neutral-600 transition-all duration-300 ease-in-out group-aria-expanded:bg-white group-aria-expanded:opacity-0"></span>
<span class="h-2 rounded-full bg-neutral-600 transition-all duration-300 ease-in-out group-aria-expanded:bg-white group-aria-expanded:-rotate-45 group-aria-expanded:-translate-y-[8px]"></span>
</div>
<span class="sr-only">Open Menu</span>
</button>
</div>

{# Nav Links #}
<div
:id="$id('nav-mobile')"
x-cloak
x-show="isOpen"
class="fixed top-0 left-0 w-full h-full bg-neutral-700"
class="absolute top-full left-0 w-full bottom-[calc(-100vh+100%)] bg-neutral-700 overflow-y-scroll -z-10"
x-data="nav"
@keyup.escape="handleEscape"
x-transition:enter="transition ease-out duration-300"
x-transition:enter-start="opacity-0 -translate-y-32"
x-transition:enter-end="opacity-100 translate-y-0"
x-transition:leave="transition ease-in duration-300"
x-transition:leave-start="opacity-100 translate-y-0"
x-transition:leave-end="opacity-0 -translate-y-32"
x-transition.opacity.duration.300ms
>

<ul class="flex flex-col py-64" @click.outside="resetStack()">
<ul
x-show="isOpen"
class="flex flex-col py-32"
x-transition:enter="transition ease-out duration-300"
x-transition:enter-start="-translate-y-32"
x-transition:enter-end="translate-y-0"
x-transition:leave="transition ease-in duration-300"
x-transition:leave-start="translate-y-0"
x-transition:leave-end="-translate-y-32"
@click.outside="resetStack()"
>
<!-- Creating a scope for refs -->
{% for node in nodes %}
{% set children = node.children.collect() %}
Expand Down

0 comments on commit 02e2624

Please sign in to comment.