From 8ce89438ce77368ce500711b823b59c360fb89cf Mon Sep 17 00:00:00 2001 From: YvetteNikolov Date: Wed, 4 Mar 2026 13:55:59 +0100 Subject: [PATCH 1/8] feat: first setup with simple nav components --- .../views/components/nav/index.blade.php | 9 ++++ resources/views/components/nav/item.blade.php | 6 +++ resources/views/components/nav/link.blade.php | 43 +++++++++++++++++++ resources/views/components/nav/list.blade.php | 6 +++ src/Components/Nav.php | 17 ++++++++ 5 files changed, 81 insertions(+) create mode 100644 resources/views/components/nav/index.blade.php create mode 100644 resources/views/components/nav/item.blade.php create mode 100644 resources/views/components/nav/link.blade.php create mode 100644 resources/views/components/nav/list.blade.php create mode 100644 src/Components/Nav.php diff --git a/resources/views/components/nav/index.blade.php b/resources/views/components/nav/index.blade.php new file mode 100644 index 0000000..73fb538 --- /dev/null +++ b/resources/views/components/nav/index.blade.php @@ -0,0 +1,9 @@ +@props(['ariaLabel']) + + diff --git a/resources/views/components/nav/item.blade.php b/resources/views/components/nav/item.blade.php new file mode 100644 index 0000000..23a0396 --- /dev/null +++ b/resources/views/components/nav/item.blade.php @@ -0,0 +1,6 @@ +
  • merge([ + 'class' => 'brave-nav-item', + ]) !!}> + {{ $slot }} +
    • diff --git a/resources/views/components/nav/link.blade.php b/resources/views/components/nav/link.blade.php new file mode 100644 index 0000000..647b8f5 --- /dev/null +++ b/resources/views/components/nav/link.blade.php @@ -0,0 +1,43 @@ +@props([ + 'item' => null, + 'href' => null, + 'active' => false, +]) + +@php + if ($item && $href) { + throw new InvalidArgumentException( + 'BraveNavLink: Do not pass both a Navi $item and $href.' + ); + } + + if (!$item && !$href) { + throw new InvalidArgumentException( + 'BraveNavLink: Either a Navi $item or $href must be provided.' + ); + } + + $hasChildren = !empty($item?->children); + + $href = $hasChildren + ? '#' + : ($item->url ?? $href); + + $active = $active + || ($item->active ?? false) + || ($item->activeParent ?? false); +@endphp + +class([ + 'brave-nav-link', + 'is-active' => $active, + $item->classes ?? null, + ]) + ->merge([ + 'href' => $href, + 'aria-current' => $active ? 'page' : null, + ]) +}}> + {{ $slot ?? $item->label ?? '' }} + diff --git a/resources/views/components/nav/list.blade.php b/resources/views/components/nav/list.blade.php new file mode 100644 index 0000000..156fa6a --- /dev/null +++ b/resources/views/components/nav/list.blade.php @@ -0,0 +1,6 @@ + diff --git a/src/Components/Nav.php b/src/Components/Nav.php new file mode 100644 index 0000000..a41aab4 --- /dev/null +++ b/src/Components/Nav.php @@ -0,0 +1,17 @@ + Date: Wed, 4 Mar 2026 16:06:55 +0100 Subject: [PATCH 2/8] feat: add dropdown-on-click and dropdown-on-hover components --- .../views/components/nav/dropdown-on-click.blade.php | 6 ++++++ .../views/components/nav/dropdown-on-hover.blade.php | 6 ++++++ resources/views/components/nav/item.blade.php | 11 ++++++++++- 3 files changed, 22 insertions(+), 1 deletion(-) create mode 100644 resources/views/components/nav/dropdown-on-click.blade.php create mode 100644 resources/views/components/nav/dropdown-on-hover.blade.php diff --git a/resources/views/components/nav/dropdown-on-click.blade.php b/resources/views/components/nav/dropdown-on-click.blade.php new file mode 100644 index 0000000..25cc560 --- /dev/null +++ b/resources/views/components/nav/dropdown-on-click.blade.php @@ -0,0 +1,6 @@ + diff --git a/resources/views/components/nav/dropdown-on-hover.blade.php b/resources/views/components/nav/dropdown-on-hover.blade.php new file mode 100644 index 0000000..a9421dd --- /dev/null +++ b/resources/views/components/nav/dropdown-on-hover.blade.php @@ -0,0 +1,6 @@ + diff --git a/resources/views/components/nav/item.blade.php b/resources/views/components/nav/item.blade.php index 23a0396..8f1df91 100644 --- a/resources/views/components/nav/item.blade.php +++ b/resources/views/components/nav/item.blade.php @@ -1,6 +1,15 @@ +@props([ + 'item' => null, + 'hasChildren' => null, +]) + +@php + $hasChildren = $hasChildren ?? !empty($item?->children); +@endphp +
  • merge([ - 'class' => 'brave-nav-item', + 'class' => 'brave-nav-item' . ($hasChildren ? ' brave-nav-item-has-children' : ''), ]) !!}> {{ $slot }}
    • From d05dc11129b4cd60d33837fea7949c53db488a4a Mon Sep 17 00:00:00 2001 From: YvetteNikolov Date: Thu, 5 Mar 2026 09:38:44 +0100 Subject: [PATCH 3/8] feat: refactor to using item only on link, and using data-mode attribute --- .../views/components/nav/dropdown-on-click.blade.php | 6 ------ .../views/components/nav/dropdown-on-hover.blade.php | 6 ------ resources/views/components/nav/dropdown.blade.php | 11 +++++++++++ resources/views/components/nav/item.blade.php | 11 +---------- resources/views/components/nav/link.blade.php | 4 +++- 5 files changed, 15 insertions(+), 23 deletions(-) delete mode 100644 resources/views/components/nav/dropdown-on-click.blade.php delete mode 100644 resources/views/components/nav/dropdown-on-hover.blade.php create mode 100644 resources/views/components/nav/dropdown.blade.php diff --git a/resources/views/components/nav/dropdown-on-click.blade.php b/resources/views/components/nav/dropdown-on-click.blade.php deleted file mode 100644 index 25cc560..0000000 --- a/resources/views/components/nav/dropdown-on-click.blade.php +++ /dev/null @@ -1,6 +0,0 @@ - diff --git a/resources/views/components/nav/dropdown-on-hover.blade.php b/resources/views/components/nav/dropdown-on-hover.blade.php deleted file mode 100644 index a9421dd..0000000 --- a/resources/views/components/nav/dropdown-on-hover.blade.php +++ /dev/null @@ -1,6 +0,0 @@ - diff --git a/resources/views/components/nav/dropdown.blade.php b/resources/views/components/nav/dropdown.blade.php new file mode 100644 index 0000000..47d846d --- /dev/null +++ b/resources/views/components/nav/dropdown.blade.php @@ -0,0 +1,11 @@ +@props([ + 'mode' => 'click', +]) + + diff --git a/resources/views/components/nav/item.blade.php b/resources/views/components/nav/item.blade.php index 8f1df91..23a0396 100644 --- a/resources/views/components/nav/item.blade.php +++ b/resources/views/components/nav/item.blade.php @@ -1,15 +1,6 @@ -@props([ - 'item' => null, - 'hasChildren' => null, -]) - -@php - $hasChildren = $hasChildren ?? !empty($item?->children); -@endphp -
  • merge([ - 'class' => 'brave-nav-item' . ($hasChildren ? ' brave-nav-item-has-children' : ''), + 'class' => 'brave-nav-item', ]) !!}> {{ $slot }}
    • diff --git a/resources/views/components/nav/link.blade.php b/resources/views/components/nav/link.blade.php index 647b8f5..da7a293 100644 --- a/resources/views/components/nav/link.blade.php +++ b/resources/views/components/nav/link.blade.php @@ -2,6 +2,7 @@ 'item' => null, 'href' => null, 'active' => false, + 'hasChildren' => null, ]) @php @@ -17,7 +18,7 @@ ); } - $hasChildren = !empty($item?->children); + $hasChildren = $hasChildren ?? !empty($item?->children); $href = $hasChildren ? '#' @@ -31,6 +32,7 @@ class([ 'brave-nav-link', + 'brave-nav-link-has-children' => $hasChildren, 'is-active' => $active, $item->classes ?? null, ]) From 9606430b679b0924aa3c377445e054a1b24b9787 Mon Sep 17 00:00:00 2001 From: YvetteNikolov Date: Thu, 5 Mar 2026 14:29:52 +0100 Subject: [PATCH 4/8] feat: add readme example for nav component --- README.md | 53 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 53 insertions(+) diff --git a/README.md b/README.md index dacb6a1..e88ad08 100644 --- a/README.md +++ b/README.md @@ -113,6 +113,59 @@ Usage: ``` +### Nav + +Navigation component with optional dropdowns. Provides the right ARIA attributes and keyboard navigation for accessibility. + +Dropdown visibility is controlled via `aria-expanded`. Use it in combination with the `group` class on the parent item and `group-has-aria-expanded` variants to show/hide the dropdown. + +**Dropdown modes** + +- `click` (default) — opens on click +- `hover` - opens on hover, closes when the mouse leaves the item + +For accessibility, the `` component requires an `aria-label`. + +Example: + +```blade + + + + + First item + + + + + + Dropdown + + + {{-- Change mode via data-mode="hover" --}} + + + + Dropdown item 1 + + + + + + Dropdown item 2 + + + + + + +``` + ## About us [![banner](https://raw.githubusercontent.com/yardinternet/.github/refs/heads/main/profile/assets/small-banner-github.svg)](https://www.yard.nl/werken-bij/) From ef29de04a98d49ee81cba6e7ca5ef6762c894f37 Mon Sep 17 00:00:00 2001 From: YvetteNikolov Date: Fri, 13 Mar 2026 14:26:22 +0100 Subject: [PATCH 5/8] feat: refactor active to isActive, add activeClass and use button in stead of a when it has children --- resources/views/components/nav/link.blade.php | 57 +++++++++---------- 1 file changed, 26 insertions(+), 31 deletions(-) diff --git a/resources/views/components/nav/link.blade.php b/resources/views/components/nav/link.blade.php index da7a293..1fa578a 100644 --- a/resources/views/components/nav/link.blade.php +++ b/resources/views/components/nav/link.blade.php @@ -1,45 +1,40 @@ @props([ 'item' => null, 'href' => null, - 'active' => false, + 'isActive' => false, + 'activeClass' => null, 'hasChildren' => null, ]) @php - if ($item && $href) { - throw new InvalidArgumentException( - 'BraveNavLink: Do not pass both a Navi $item and $href.' - ); - } - - if (!$item && !$href) { - throw new InvalidArgumentException( - 'BraveNavLink: Either a Navi $item or $href must be provided.' - ); - } - $hasChildren = $hasChildren ?? !empty($item?->children); - $href = $hasChildren - ? '#' - : ($item->url ?? $href); + $href = $item->url ?? $href; + $label = $slot ?? $item->label ?? ''; - $active = $active + $isActive = $isActive || ($item->active ?? false) || ($item->activeParent ?? false); + + $baseAttributes = $attributes + ->class([ + 'brave-nav-link', + 'brave-nav-link-has-children' => $hasChildren, + 'brave-nav-link-is-active' => $isActive, + $activeClass => $isActive && $activeClass, + $item->classes ?? null, + ]) + ->merge([ + 'aria-current' => $isActive ? 'page' : null, + ]); @endphp -class([ - 'brave-nav-link', - 'brave-nav-link-has-children' => $hasChildren, - 'is-active' => $active, - $item->classes ?? null, - ]) - ->merge([ - 'href' => $href, - 'aria-current' => $active ? 'page' : null, - ]) -}}> - {{ $slot ?? $item->label ?? '' }} - +@if ($hasChildren) + +@else + merge(['href' => $href]) }}> + {{ $label }} + +@endif From 7a091afe397e62d654b6e627d46d2df078291f9c Mon Sep 17 00:00:00 2001 From: YvetteNikolov Date: Fri, 13 Mar 2026 14:26:29 +0100 Subject: [PATCH 6/8] chore: update readme --- README.md | 53 +++++++++++++++++++++++++++++++++++++++++++++-------- 1 file changed, 45 insertions(+), 8 deletions(-) diff --git a/README.md b/README.md index e88ad08..34052fa 100644 --- a/README.md +++ b/README.md @@ -126,13 +126,52 @@ Dropdown visibility is controlled via `aria-expanded`. Use it in combination wit For accessibility, the `` component requires an `aria-label`. -Example: +Example usage with Navi: + +```blade +@php($menu = \Log1x\Navi\Navi::make()->build('primary_navigation')) + +@if ($menu->isNotEmpty()) + + + @foreach ($primaryNavigation->all() as $item) + + + {!! $item->label !!} + @if ($item->children) + + @endif + + + @if ($item->children) + + @foreach ($item->children as $child) + + + {!! $child->label !!} + + + @endforeach + + @endif + + @endforeach + + +@endif + +``` + +Usage without Navi: ```blade - + First item @@ -143,12 +182,10 @@ Example: {{-- Change mode via data-mode="hover" --}} - + Dropdown item 1 From 4ad90c9d83b33af2dc4ecca89e062f4a6cc4947b Mon Sep 17 00:00:00 2001 From: Yvette Nikolov <48315669+YvetteNikolov@users.noreply.github.com> Date: Tue, 14 Apr 2026 13:44:25 +0200 Subject: [PATCH 7/8] Potential fix for pull request finding Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 34052fa..711e027 100644 --- a/README.md +++ b/README.md @@ -181,8 +181,8 @@ Usage without Navi: Dropdown - {{-- Change mode via data-mode="hover" --}} - From aba11dacef8112014c2d536e7b4632ff85738b7e Mon Sep 17 00:00:00 2001 From: YvetteNikolov Date: Tue, 14 Apr 2026 13:55:57 +0200 Subject: [PATCH 8/8] chore: misc fixes suggested by copilot --- README.md | 2 +- resources/views/components/nav/link.blade.php | 10 +++++----- src/ComponentsServiceProvider.php | 3 ++- 3 files changed, 8 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index 711e027..f3162eb 100644 --- a/README.md +++ b/README.md @@ -134,7 +134,7 @@ Example usage with Navi: @if ($menu->isNotEmpty()) - @foreach ($primaryNavigation->all() as $item) + @foreach ($menu->all() as $item) {!! $item->label !!} diff --git a/resources/views/components/nav/link.blade.php b/resources/views/components/nav/link.blade.php index 1fa578a..45ac27f 100644 --- a/resources/views/components/nav/link.blade.php +++ b/resources/views/components/nav/link.blade.php @@ -9,12 +9,12 @@ @php $hasChildren = $hasChildren ?? !empty($item?->children); - $href = $item->url ?? $href; - $label = $slot ?? $item->label ?? ''; + $href = $item?->url ?? $href; + $label = !$slot->isEmpty() ? $slot : ($item?->label ?? ''); $isActive = $isActive - || ($item->active ?? false) - || ($item->activeParent ?? false); + || ($item?->active ?? false) + || ($item?->activeParent ?? false); $baseAttributes = $attributes ->class([ @@ -22,7 +22,7 @@ 'brave-nav-link-has-children' => $hasChildren, 'brave-nav-link-is-active' => $isActive, $activeClass => $isActive && $activeClass, - $item->classes ?? null, + $item?->classes ?? null, ]) ->merge([ 'aria-current' => $isActive ? 'page' : null, diff --git a/src/ComponentsServiceProvider.php b/src/ComponentsServiceProvider.php index caff40c..208f442 100644 --- a/src/ComponentsServiceProvider.php +++ b/src/ComponentsServiceProvider.php @@ -12,6 +12,7 @@ use Yard\Brave\Components\Dialog; use Yard\Brave\Components\FeedbackForm; use Yard\Brave\Components\ImgFocalPoint; +use Yard\Brave\Components\Nav; use Yard\Brave\Components\PatternContent; use Yard\Brave\Components\ReadSpeaker; use Yard\Brave\Components\SocialIcon; @@ -25,7 +26,7 @@ public function configurePackage(Package $package): void ->name('components') ->hasConfigFile() ->hasViews('brave') - ->hasViewComponents('brave', Accordion::class, BackButton::class, Breadcrumb::class, Dialog::class, FeedbackForm::class, ImgFocalPoint::class, PatternContent::class, ReadSpeaker::class, SocialIcon::class); + ->hasViewComponents('brave', Accordion::class, BackButton::class, Breadcrumb::class, Dialog::class, FeedbackForm::class, ImgFocalPoint::class, Nav::class, PatternContent::class, ReadSpeaker::class, SocialIcon::class); } public function packageBooted(): void