Skip to content

Commit 1e958b5

Browse files
stensten
committed
Refactor menu component from array data structure to model
1 parent 5d692c1 commit 1e958b5

File tree

12 files changed

+211
-273
lines changed

12 files changed

+211
-273
lines changed

‎resources/views/tailwind/components/menu/default-item.blade.php‎

Lines changed: 17 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,35 @@
11
{{-- Default menu item template --}}
22
@php
3+
$hasChildren = $item->children && $item->children->isNotEmpty();
4+
$isCurrent = $item->isCurrentMenuItem();
5+
$isActive = $isCurrent || ($hasChildren && $item->hasActiveChildren());
6+
37
$classes = collect(['menu-item'])
4-
->when($item['has_children'], fn($collection) => $collection->push('has-children'))
5-
->when($item['is_current'], fn($collection) => $collection->push('current'))
6-
->when($item['is_active'], fn($collection) => $collection->push('active'))
7-
->when(!empty($item['css_classes']), fn($collection) => $collection->push($item['css_classes']))
8+
->when($hasChildren, fn($collection) => $collection->push('has-children'))
9+
->when($isCurrent, fn($collection) => $collection->push('current'))
10+
->when($isActive, fn($collection) => $collection->push('active'))
811
->filter()
912
->implode(' ');
1013
1114
$linkClasses = collect(['menu-link'])
12-
->when($item['is_current'], fn($collection) => $collection->push('current'))
13-
->when($item['is_active'], fn($collection) => $collection->push('active'))
15+
->when($isCurrent, fn($collection) => $collection->push('current'))
16+
->when($isActive, fn($collection) => $collection->push('active'))
1417
->filter()
1518
->implode(' ');
1619
@endphp
1720

18-
<li class="{{ $classes }}" {!! $getDataAttributes() !!}>
19-
<a href="{{ $item['url'] }}"
21+
<li class="{{ $classes }}">
22+
<a href="{{ $item->getCompleteUrl($locale) }}"
2023
class="{{ $linkClasses }}"
21-
@if($item['target'] !== '_self') target="{{ $item['target'] }}" @endif
22-
@if($item['is_current']) aria-current="page" @endif>
23-
{{ $item['label'] }}
24+
@if($item->getTarget() !== '_self') target="{{ $item->getTarget() }}" @endif
25+
@if($isCurrent) aria-current="page" @endif>
26+
{{ $item->getDisplayLabel($locale) }}
2427
</a>
2528

26-
@if($item['has_children'])
29+
@if($hasChildren)
2730
<ul class="menu submenu">
28-
@foreach($item['children'] as $child)
29-
<x-flexible-pages-menu-item :item="$child" :style="$style" />
31+
@foreach($item->children as $child)
32+
<x-flexible-pages-menu-item :item="$child" :style="$style" :locale="$locale" />
3033
@endforeach
3134
</ul>
3235
@endif

‎resources/views/tailwind/components/menu/default.blade.php‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
{{-- Default menu template --}}
2-
@if($items && $menu)
2+
@if($items && $items->isNotEmpty() && $menu)
33
<nav class="menu-navigation" role="navigation" aria-label="{{ $menu->name }}">
44
<ul class="menu">
55
@foreach($items as $item)
6-
<x-flexible-pages-menu-item :item="$item" :style="$style" />
6+
<x-flexible-pages-menu-item :item="$item" :style="$style" :locale="$locale" />
77
@endforeach
88
</ul>
99
</nav>

‎resources/views/tailwind/components/menu/dropdown-item.blade.php‎

Lines changed: 17 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,36 @@
11
{{-- Dropdown menu item template --}}
22
@php
3+
$isCurrent = $item->isCurrentMenuItem();
4+
$hasChildren = $item->children && $item->children->isNotEmpty();
5+
36
$linkClasses = collect(['block', 'px-4', 'py-2', 'text-sm', 'text-gray-700'])
4-
->when($item['is_current'], fn($collection) => $collection->push('bg-gray-100', 'text-gray-900'))
5-
->when(!$item['is_current'], fn($collection) => $collection->push('hover:bg-gray-100', 'hover:text-gray-900'))
7+
->when($isCurrent, fn($collection) => $collection->push('bg-gray-100', 'text-gray-900'))
8+
->when(!$isCurrent, fn($collection) => $collection->push('hover:bg-gray-100', 'hover:text-gray-900'))
69
->filter()
710
->implode(' ');
811
@endphp
912

10-
<a href="{{ $item['url'] }}"
13+
<a href="{{ $item->getCompleteUrl($locale) }}"
1114
class="{{ $linkClasses }}"
1215
role="menuitem"
1316
tabindex="-1"
14-
@if($item['target'] !== '_self') target="{{ $item['target'] }}" @endif
15-
@if($item['is_current']) aria-current="page" @endif
16-
{!! $getDataAttributes() !!}>
17-
{{ $item['label'] }}
18-
@if($item['has_children'])
17+
@if($item->getTarget() !== '_self') target="{{ $item->getTarget() }}" @endif
18+
@if($isCurrent) aria-current="page" @endif>
19+
{{ $item->getDisplayLabel($locale) }}
20+
@if($hasChildren)
1921
<span class="ml-2 text-gray-400">→</span>
2022
@endif
2123
</a>
2224

23-
@if($item['has_children'])
24-
@foreach($item['children'] as $child)
25-
<a href="{{ $child['url'] }}"
26-
class="block px-8 py-2 text-sm text-gray-600 hover:bg-gray-50 hover:text-gray-900"
25+
@if($hasChildren)
26+
@foreach($item->children as $child)
27+
<a href="{{ $child->getCompleteUrl($locale) }}"
28+
class="block px-8 py-2 text-sm text-gray-600 hover:bg-gray-50 hover:text-gray-900 {{ $child->isCurrentMenuItem() ? 'bg-gray-100 text-gray-900' : '' }}"
2729
role="menuitem"
2830
tabindex="-1"
29-
@if($child['target'] !== '_self') target="{{ $child['target'] }}" @endif
30-
@if($child['is_current']) aria-current="page" @endif>
31-
{{ $child['label'] }}
31+
@if($child->getTarget() !== '_self') target="{{ $child->getTarget() }}" @endif
32+
@if($child->isCurrentMenuItem()) aria-current="page" @endif>
33+
{{ $child->getDisplayLabel($locale) }}
3234
</a>
3335
@endforeach
3436
@endif

‎resources/views/tailwind/components/menu/dropdown.blade.php‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{{-- Dropdown menu template with Alpine.js --}}
2-
@if($items && $menu)
2+
@if($items && $items->isNotEmpty() && $menu)
33
<div class="menu-navigation menu-dropdown relative inline-block text-left"
44
x-data="dropdownMenu()"
55
x-init="init()"
@@ -46,7 +46,7 @@ class="absolute right-0 z-10 mt-2 w-56 origin-top-right rounded-md bg-white shad
4646
@keydown.tab="close()">
4747
<div class="py-1" role="none">
4848
@foreach($items as $item)
49-
<x-flexible-pages-menu-item :item="$item" :style="$style" />
49+
<x-flexible-pages-menu-item :item="$item" :style="$style" :locale="$locale" />
5050
@endforeach
5151
</div>
5252
</div>

‎resources/views/tailwind/components/menu/horizontal-item.blade.php‎

Lines changed: 21 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,40 @@
11
{{-- Horizontal menu item template --}}
22
@php
3+
$hasChildren = $item->children && $item->children->isNotEmpty();
4+
$isCurrent = $item->isCurrentMenuItem();
5+
$isActive = $isCurrent || ($hasChildren && $item->hasActiveChildren());
6+
37
$classes = collect(['menu-item'])
4-
->when($item['has_children'], fn($collection) => $collection->push('relative', 'group'))
5-
->when($item['is_current'], fn($collection) => $collection->push('current'))
6-
->when($item['is_active'], fn($collection) => $collection->push('active'))
7-
->when(!empty($item['css_classes']), fn($collection) => $collection->push($item['css_classes']))
8+
->when($hasChildren, fn($collection) => $collection->push('relative', 'group'))
9+
->when($isCurrent, fn($collection) => $collection->push('current'))
10+
->when($isActive, fn($collection) => $collection->push('active'))
811
->filter()
912
->implode(' ');
1013
1114
$linkClasses = collect(['menu-link', 'px-3', 'py-2', 'rounded-md', 'text-sm', 'font-medium'])
12-
->when($item['is_current'], fn($collection) => $collection->push('bg-gray-900', 'text-white'))
13-
->when(!$item['is_current'], fn($collection) => $collection->push('text-gray-900', 'hover:bg-gray-50'))
15+
->when($isCurrent, fn($collection) => $collection->push('bg-gray-900', 'text-white'))
16+
->when(!$isCurrent, fn($collection) => $collection->push('text-gray-900', 'hover:bg-gray-50'))
1417
->filter()
1518
->implode(' ');
1619
@endphp
1720

18-
<li class="{{ $classes }}" {!! $getDataAttributes() !!}>
19-
<a href="{{ $item['url'] }}"
21+
<li class="{{ $classes }}">
22+
<a href="{{ $item->getCompleteUrl($locale) }}"
2023
class="{{ $linkClasses }}"
21-
@if($item['target'] !== '_self') target="{{ $item['target'] }}" @endif
22-
@if($item['is_current']) aria-current="page" @endif>
23-
{{ $item['label'] }}
24+
@if($item->getTarget() !== '_self') target="{{ $item->getTarget() }}" @endif
25+
@if($isCurrent) aria-current="page" @endif>
26+
{{ $item->getDisplayLabel($locale) }}
2427
</a>
2528

26-
@if($item['has_children'])
29+
@if($hasChildren)
2730
<ul class="absolute left-0 mt-2 w-48 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-10">
28-
@foreach($item['children'] as $child)
31+
@foreach($item->children as $child)
2932
<li>
30-
<a href="{{ $child['url'] }}"
31-
class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 {{ $child['is_current'] ? 'bg-gray-50 font-medium' : '' }}"
32-
@if($child['target'] !== '_self') target="{{ $child['target'] }}" @endif
33-
@if($child['is_current']) aria-current="page" @endif>
34-
{{ $child['label'] }}
33+
<a href="{{ $child->getCompleteUrl($locale) }}"
34+
class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 {{ $child->isCurrentMenuItem() ? 'bg-gray-50 font-medium' : '' }}"
35+
@if($child->getTarget() !== '_self') target="{{ $child->getTarget() }}" @endif
36+
@if($child->isCurrentMenuItem()) aria-current="page" @endif>
37+
{{ $child->getDisplayLabel($locale) }}
3538
</a>
3639
</li>
3740
@endforeach

‎resources/views/tailwind/components/menu/horizontal.blade.php‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{{-- Horizontal menu template with mobile toggle --}}
2-
@if($items && $menu)
2+
@if($items && $items->isNotEmpty() && $menu)
33
<nav class="menu-navigation menu-horizontal"
44
role="navigation"
55
aria-label="{{ $menu->name }}"
@@ -31,7 +31,7 @@ class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hove
3131
<ul class="hidden md:flex md:space-x-6" role="menubar">
3232
@foreach($items as $item)
3333
<li role="none">
34-
<x-flexible-pages-menu-item :item="$item" :style="$style" />
34+
<x-flexible-pages-menu-item :item="$item" :style="$style" :locale="$locale" />
3535
</li>
3636
@endforeach
3737
</ul>
@@ -51,7 +51,7 @@ class="md:hidden absolute top-full left-0 right-0 z-50 bg-white shadow-lg border
5151
<ul class="px-2 pt-2 pb-3 space-y-1" role="menu">
5252
@foreach($items as $item)
5353
<li role="none">
54-
<x-flexible-pages-menu-item :item="$item" :style="'mobile'" />
54+
<x-flexible-pages-menu-item :item="$item" :style="'mobile'" :locale="$locale" />
5555
</li>
5656
@endforeach
5757
</ul>

‎resources/views/tailwind/components/menu/mobile-item.blade.php‎

Lines changed: 17 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,35 @@
11
{{-- Mobile menu item template --}}
22
@php
3+
$isCurrent = $item->isCurrentMenuItem();
4+
$hasChildren = $item->children && $item->children->isNotEmpty();
5+
36
$linkClasses = collect(['block', 'px-3', 'py-2', 'rounded-md', 'text-base', 'font-medium'])
4-
->when($item['is_current'], fn($collection) => $collection->push('text-indigo-700', 'bg-indigo-50'))
5-
->when(!$item['is_current'], fn($collection) => $collection->push('text-gray-700', 'hover:text-gray-900', 'hover:bg-gray-50'))
7+
->when($isCurrent, fn($collection) => $collection->push('text-indigo-700', 'bg-indigo-50'))
8+
->when(!$isCurrent, fn($collection) => $collection->push('text-gray-700', 'hover:text-gray-900', 'hover:bg-gray-50'))
69
->filter()
710
->implode(' ');
811
@endphp
912

10-
<a href="{{ $item['url'] }}"
13+
<a href="{{ $item->getCompleteUrl($locale) }}"
1114
class="{{ $linkClasses }}"
1215
role="menuitem"
13-
@if($item['target'] !== '_self') target="{{ $item['target'] }}" @endif
14-
@if($item['is_current']) aria-current="page" @endif
15-
{!! $getDataAttributes() !!}>
16-
{{ $item['label'] }}
17-
@if($item['has_children'])
16+
@if($item->getTarget() !== '_self') target="{{ $item->getTarget() }}" @endif
17+
@if($isCurrent) aria-current="page" @endif>
18+
{{ $item->getDisplayLabel($locale) }}
19+
@if($hasChildren)
1820
<span class="ml-2 text-gray-400">▼</span>
1921
@endif
2022
</a>
2123

22-
@if($item['has_children'])
24+
@if($hasChildren)
2325
<div class="pl-4">
24-
@foreach($item['children'] as $child)
25-
<a href="{{ $child['url'] }}"
26-
class="block px-3 py-2 rounded-md text-sm font-medium text-gray-600 hover:text-gray-900 hover:bg-gray-50"
26+
@foreach($item->children as $child)
27+
<a href="{{ $child->getCompleteUrl($locale) }}"
28+
class="block px-3 py-2 rounded-md text-sm font-medium text-gray-600 hover:text-gray-900 hover:bg-gray-50 {{ $child->isCurrentMenuItem() ? 'text-indigo-700 bg-indigo-50' : '' }}"
2729
role="menuitem"
28-
@if($child['target'] !== '_self') target="{{ $child['target'] }}" @endif
29-
@if($child['is_current']) aria-current="page" @endif>
30-
{{ $child['label'] }}
30+
@if($child->getTarget() !== '_self') target="{{ $child->getTarget() }}" @endif
31+
@if($child->isCurrentMenuItem()) aria-current="page" @endif>
32+
{{ $child->getDisplayLabel($locale) }}
3133
</a>
3234
@endforeach
3335
</div>

‎resources/views/tailwind/components/menu/vertical-item.blade.php‎

Lines changed: 29 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,48 @@
11
{{-- Vertical menu item template with collapsible submenus --}}
22
@php
3+
$hasChildren = $item->children && $item->children->isNotEmpty();
4+
$isCurrent = $item->isCurrentMenuItem();
5+
$isActive = $isCurrent || ($hasChildren && $item->hasActiveChildren());
6+
37
$classes = collect(['menu-item'])
4-
->when($item['has_children'], fn($collection) => $collection->push('has-children'))
5-
->when($item['is_current'], fn($collection) => $collection->push('current'))
6-
->when($item['is_active'], fn($collection) => $collection->push('active'))
7-
->when(!empty($item['css_classes']), fn($collection) => $collection->push($item['css_classes']))
8+
->when($hasChildren, fn($collection) => $collection->push('has-children'))
9+
->when($isCurrent, fn($collection) => $collection->push('current'))
10+
->when($isActive, fn($collection) => $collection->push('active'))
811
->filter()
912
->implode(' ');
1013
1114
$linkClasses = collect(['menu-link', 'flex', 'items-center', 'px-4', 'py-3', 'text-sm', 'font-medium', 'rounded-lg'])
12-
->when($item['is_current'], fn($collection) => $collection->push('bg-blue-100', 'text-blue-700'))
13-
->when(!$item['is_current'], fn($collection) => $collection->push('text-gray-700', 'hover:bg-gray-100'))
15+
->when($isCurrent, fn($collection) => $collection->push('bg-blue-100', 'text-blue-700'))
16+
->when(!$isCurrent, fn($collection) => $collection->push('text-gray-700', 'hover:bg-gray-100'))
1417
->filter()
1518
->implode(' ');
1619
17-
$itemId = 'menu-item-' . $item['id'];
20+
$itemId = 'menu-item-' . $item->id;
21+
$displayLabel = $item->getDisplayLabel($locale);
1822
@endphp
1923

20-
<li class="{{ $classes }}"
21-
{!! $getDataAttributes() !!}
22-
@if($item['has_children'])
24+
<li class="{{ $classes }}"
25+
@if($hasChildren)
2326
data-has-children="true"
2427
data-item-id="{{ $itemId }}"
2528
@endif>
2629

27-
@if($item['has_children'])
30+
@if($hasChildren)
2831
{{-- Parent item with submenu toggle --}}
2932
<div class="flex items-center">
30-
<a href="{{ $item['url'] }}"
33+
<a href="{{ $item->getCompleteUrl($locale) }}"
3134
class="{{ $linkClasses }} flex-1"
3235
role="menuitem"
33-
@if($item['target'] !== '_self') target="{{ $item['target'] }}" @endif
34-
@if($item['is_current']) aria-current="page" @endif>
35-
<span class="flex-1">{{ $item['label'] }}</span>
36+
@if($item->getTarget() !== '_self') target="{{ $item->getTarget() }}" @endif
37+
@if($isCurrent) aria-current="page" @endif>
38+
<span class="flex-1">{{ $displayLabel }}</span>
3639
</a>
3740
<button type="button"
3841
class="p-1 ml-2 rounded hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-indigo-500"
3942
@click="$parent.toggleSubmenu('{{ $itemId }}')"
4043
:aria-expanded="$parent.isExpanded('{{ $itemId }}')"
4144
:aria-controls="'submenu-{{ $itemId }}'"
42-
aria-label="{{ flexiblePagesTrans('menu.toggle_submenu', ['label' => $item['label']]) }}">
45+
aria-label="{{ flexiblePagesTrans('menu.toggle_submenu', ['label' => $displayLabel]) }}">
4346
<svg class="w-4 h-4 transition-transform"
4447
:class="{ 'rotate-90': $parent.isExpanded('{{ $itemId }}') }"
4548
fill="currentColor"
@@ -60,26 +63,26 @@ class="p-1 ml-2 rounded hover:bg-gray-100 focus:outline-none focus:ring-2 focus:
6063
class="ml-6 mt-2 space-y-1"
6164
id="submenu-{{ $itemId }}"
6265
role="menu">
63-
@foreach($item['children'] as $child)
66+
@foreach($item->children as $child)
6467
<li role="none">
65-
<a href="{{ $child['url'] }}"
66-
class="flex items-center px-3 py-2 text-sm rounded-lg {{ $child['is_current'] ? 'bg-blue-50 text-blue-600 font-medium' : 'text-gray-600 hover:bg-gray-50' }}"
68+
<a href="{{ $child->getCompleteUrl($locale) }}"
69+
class="flex items-center px-3 py-2 text-sm rounded-lg {{ $child->isCurrentMenuItem() ? 'bg-blue-50 text-blue-600 font-medium' : 'text-gray-600 hover:bg-gray-50' }}"
6770
role="menuitem"
68-
@if($child['target'] !== '_self') target="{{ $child['target'] }}" @endif
69-
@if($child['is_current']) aria-current="page" @endif>
70-
{{ $child['label'] }}
71+
@if($child->getTarget() !== '_self') target="{{ $child->getTarget() }}" @endif
72+
@if($child->isCurrentMenuItem()) aria-current="page" @endif>
73+
{{ $child->getDisplayLabel($locale) }}
7174
</a>
7275
</li>
7376
@endforeach
7477
</ul>
7578
@else
7679
{{-- Regular menu item without children --}}
77-
<a href="{{ $item['url'] }}"
80+
<a href="{{ $item->getCompleteUrl($locale) }}"
7881
class="{{ $linkClasses }}"
7982
role="menuitem"
80-
@if($item['target'] !== '_self') target="{{ $item['target'] }}" @endif
81-
@if($item['is_current']) aria-current="page" @endif>
82-
<span class="flex-1">{{ $item['label'] }}</span>
83+
@if($item->getTarget() !== '_self') target="{{ $item->getTarget() }}" @endif
84+
@if($isCurrent) aria-current="page" @endif>
85+
<span class="flex-1">{{ $displayLabel }}</span>
8386
</a>
8487
@endif
8588
</li>

‎resources/views/tailwind/components/menu/vertical.blade.php‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{{-- Vertical menu template with collapsible submenus --}}
2-
@if($items && $menu)
2+
@if($items && $items->isNotEmpty() && $menu)
33
<nav class="menu-navigation menu-vertical"
44
role="navigation"
55
aria-label="{{ $menu->name }}"
@@ -8,7 +8,7 @@
88
<ul class="space-y-1" role="menubar" aria-orientation="vertical">
99
@foreach($items as $item)
1010
<li role="none">
11-
<x-flexible-pages-menu-item :item="$item" :style="$style" />
11+
<x-flexible-pages-menu-item :item="$item" :style="$style" :locale="$locale" />
1212
</li>
1313
@endforeach
1414
</ul>

0 commit comments

Comments
 (0)