feat/brave nav

README.md

@@ -113,6 +113,96 @@
 <x-brave-read-speaker />
 ```
 
+### 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 `<x-brave::nav>` component requires an `aria-label`.
+
+Example usage with Navi:
+
+```blade
+@php($menu = \Log1x\Navi\Navi::make()->build('primary_navigation'))
+
+@if ($menu->isNotEmpty())
+	<x-brave::nav aria-label="{{ __('Primaire navigatie', 'sage') }}">
+		<x-brave::nav.list>
+			@foreach ($menu->all() as $item)
+				<x-brave::nav.item class="group">
+					<x-brave::nav.link :item="$item" class="text-blue-500" activeClass="text-red-500">
+						{!! $item->label !!}
+						@if ($item->children)
+							<i class="fa-light fa-chevron-down"></i>
+						@endif
+					</x-brave::nav.link>
+
+					@if ($item->children)
+						<x-brave::nav.dropdown mode="hover" @class([
+							'invisible absolute bg-white',
+							'group-has-aria-expanded:visible',
+						])>
+							@foreach ($item->children as $child)
+								<x-brave::nav.item>
+									<x-brave::nav.link :item="$child" class="text-blue-500" activeClass="text-red-500">
+										{!! $child->label !!}
+									</x-brave::nav.link>
+								</x-brave::nav.item>
+							@endforeach
+						</x-brave::nav.dropdown>
+					@endif
+				</x-brave::nav.item>
+			@endforeach
+		</x-brave::nav.list>
+	</x-brave::nav>
+@endif
+
+```
+
+Usage without Navi:
+
+```blade
+<x-brave::nav aria-label="Main navigation">
+    <x-brave::nav.list>
+        <x-brave::nav.item>
+            <x-brave::nav.link href="/contact" :isActive="true" activeClass="text-red-500">
+                First item
+            </x-brave::nav.link>
+        </x-brave::nav.item>
+
+        <x-brave::nav.item class="group">
+            <x-brave::nav.link href="#" :hasChildren="true">
+                Dropdown
+            </x-brave::nav.link>
+
+            {{-- Change mode via mode="hover" --}}
+            <x-brave::nav.dropdown mode="hover" @class([
+                'invisible absolute bg-white',
+                'group-has-aria-expanded:visible',
+            ])>
+                <x-brave::nav.item>
+                    <x-brave::nav.link href="/contact">
+                        Dropdown item 1
+                    </x-brave::nav.link>
+                </x-brave::nav.item>
+
+                <x-brave::nav.item>
+                    <x-brave::nav.link href="/">
+                        Dropdown item 2
+                    </x-brave::nav.link>
+                </x-brave::nav.item>
+            </x-brave::nav.dropdown>
+        </x-brave::nav.item>
+    </x-brave::nav.list>
+</x-brave::nav>
+```
+
 ## About us
 
 [![banner](https://raw.githubusercontent.com/yardinternet/.github/refs/heads/main/profile/assets/small-banner-github.svg)](https://www.yard.nl/werken-bij/)

resources/views/components/nav/dropdown.blade.php

@@ -0,0 +1,11 @@
+@props([
+	'mode' => 'click',
+])
+
+<ul
+    {!! $attributes->merge([
+        'class' => 'brave-nav-dropdown brave-nav-dropdown-on-' . $mode,
+        'data-mode' => $mode,
+    ]) !!}>
+    {{ $slot }}
+</ul>

resources/views/components/nav/index.blade.php

@@ -0,0 +1,9 @@
+@props(['ariaLabel'])
+
+<nav
+    {{ $attributes->merge([
+        'aria-label' => $ariaLabel,
+        'class' => 'brave-nav',
+    ]) }}>
+    {{ $slot }}
+</nav>

resources/views/components/nav/item.blade.php

@@ -0,0 +1,6 @@
+<li
+    {!! $attributes->merge([
+        'class' => 'brave-nav-item',
+    ]) !!}>
+    {{ $slot }}
+</li>

resources/views/components/nav/link.blade.php

@@ -0,0 +1,40 @@
+@props([
+    'item' => null,
+    'href' => null,
+    'isActive' => false,
+	'activeClass' => null,
+	'hasChildren' => null,
+])
+
+@php
+	$hasChildren = $hasChildren ?? !empty($item?->children);
+
+    $href = $item?->url ?? $href;
+    $label = !$slot->isEmpty() ? $slot : ($item?->label ?? '');
+
+    $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
+
+@if ($hasChildren)
+    <button {{ $baseAttributes }}>
+        {{ $label }}
+    </button>
+@else
+    <a {{ $baseAttributes->merge(['href' => $href]) }}>
+        {{ $label }}
+    </a>
+@endif

resources/views/components/nav/list.blade.php

@@ -0,0 +1,6 @@
+<ul
+    {!! $attributes->merge([
+        'class' => 'brave-nav-list',
+    ]) !!}>
+    {{ $slot }}
+</ul>

src/Components/Nav.php

@@ -0,0 +1,17 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Yard\Brave\Components;
+
+use Illuminate\Contracts\View\Factory;
+use Illuminate\View\Component;
+use Illuminate\View\View;
+
+class Nav extends Component
+{
+	public function render(): Factory|View
+	{
+		return view('brave::components.nav.index');
+	}
+}

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