Skip to content

Commit e8362f0

Browse files
author
Ben Verbist
committed
Updated the default blade template for the menu builder + removed the other ones + improved the abstract MenuSeeder
1 parent c7b8232 commit e8362f0

14 files changed

+239
-562
lines changed

‎README.md‎

Lines changed: 21 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -181,19 +181,33 @@ class Product extends Model implements HasMenuLabel
181181
If you are using the Flexible Content Blocks title trait in your model, you can implement `HasMenuLabel`
182182
easily with [`HasTitleMenuLabelTrait`](src/Models/Concerns/HasTitleMenuLabelTrait.php).
183183

184-
### Customizing menu styles
184+
### Using the 'default' menu style
185185

186-
The package includes several built-in menu styles, but you can easily add your own:
186+
The package includes a `default` built-in menu style which is developed in a generic way so that you can tweak its styling by passing some attributes without having to publish the corresponding blade templates.
187+
188+
Example usage to have a horizontal menu using tailwind:
189+
```blade
190+
<x-flexible-pages-menu
191+
code="HEADER"
192+
style="default"
193+
ulClass="flex flex-row justify-start items-center gap-x-4"
194+
itemLinkClass="text-black hover:text-primary hover:underline"
195+
currentItemLinkClass="text-grey hover:no-underline"
196+
/>
197+
```
198+
199+
See the file `../tailwind/components/menu/default.blade.php` for all possible attributes.
200+
201+
### Customizing additional menu styles
202+
203+
If needed, you can easily add your own menu styles in addition to the `default` style:
187204

188205
1. **Add new styles to config:**
189206
```php
190207
// config/filament-flexible-content-block-pages.php
191208
'menu' => [
192209
'styles' => [
193210
'default',
194-
'horizontal',
195-
'vertical',
196-
'dropdown',
197211
'mega', // Your custom style
198212
],
199213
],
@@ -211,7 +225,7 @@ resources/views/vendor/filament-flexible-content-block-pages/tailwind/components
211225

212226
3. **Use in your templates:**
213227
```blade
214-
<x-flexible-pages-menu code="header" style="mega" />
228+
<x-flexible-pages-menu code="HEADER" style="mega" />
215229
```
216230

217231
The style can also be configured in the database model, then you can skip the `style` attribute.
@@ -373,8 +387,7 @@ check:
373387
- Seppe: tailwind config complete? do we need to add flexible content blocks styling?
374388
- Seppe: menu components ok?
375389

376-
menu:
377-
- Ben: menu seeder extra functions from VLWPLA
390+
menu:
378391
- page delete modal when page used in menu
379392
- orm listeners for linkable models that are in a menu to avoid accidental deletion.
380393
- caching tree model + observer to clear cache

‎config/filament-flexible-content-block-pages.php‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -112,14 +112,9 @@
112112
'styles' => [
113113
// Available menu styles (codes only - labels come from translations)
114114
'default',
115-
'horizontal',
116-
'vertical',
117-
'dropdown',
118115

119-
// Add your custom styles here:
116+
// If needed, add your custom style(s) here:
120117
// 'mega',
121-
// 'mobile',
122-
// 'breadcrumb',
123118
],
124119
],
125120

‎documentation/seeders.md‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@ $headerMenu = $this->createMenu(
5959
name: 'Header Navigation',
6060
code: 'header',
6161
description: 'Main navigation menu displayed in the header',
62-
style: 'horizontal',
62+
style: 'default',
6363
maxDepth: 3
6464
);
6565
```
@@ -153,6 +153,7 @@ protected function createMenuItemForModel(
153153
Menu|int $menu,
154154
Model $model,
155155
string|array|null $label = null,
156+
string $link_type = 'model',
156157
bool $useModelTitle = true,
157158
bool $isVisible = true,
158159
string $target = '_self',
@@ -166,6 +167,7 @@ protected function createMenuItemForModel(
166167
- Falls back to class name + ID if no label provided
167168
- Sets up polymorphic relationship correctly
168169
- Supports `use_model_title` for dynamic labels
170+
- There is also a convenience function `createMenuItemForPageCode` (uses `createMenuItemForModel` under the hood) which will search the Page model based on an input `pageCode`
169171

170172
**Example:**
171173
```php
@@ -175,6 +177,7 @@ $page = Page::where('slug', 'about')->first();
175177
$aboutItem = $this->createMenuItemForModel(
176178
menu: $menu,
177179
model: $page,
180+
link_type: 'filament-flexible-content-block-pages::page',
178181
useModelTitle: true
179182
);
180183

@@ -183,6 +186,7 @@ $contactItem = $this->createMenuItemForModel(
183186
menu: $menu,
184187
model: $contactPage,
185188
label: 'Get in Touch',
189+
link_type: 'filament-flexible-content-block-pages::page',
186190
useModelTitle: false
187191
);
188192
```
@@ -252,7 +256,7 @@ class MainMenuSeeder extends MenuSeeder
252256
name: 'Main Navigation',
253257
code: 'main',
254258
description: 'Primary website navigation',
255-
style: 'horizontal',
259+
style: 'default',
256260
maxDepth: 3
257261
);
258262

‎resources/lang/en/filament-flexible-content-block-pages.php‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -89,9 +89,6 @@
8989
'menu' => [
9090
'styles' => [
9191
'default' => 'Default menu',
92-
'horizontal' => 'Horizontal navigation',
93-
'vertical' => 'Sidebar navigation',
94-
'dropdown' => 'Dropdown menu',
9592
],
9693
'no_items' => 'No menu items available',
9794
'mobile_toggle_label' => 'Open main menu',

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

Lines changed: 65 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,75 @@
11
{{-- Default menu item template --}}
2+
3+
@props([
4+
'item',
5+
'style',
6+
'locale',
7+
8+
'itemClass' => 'menu-item',
9+
'itemHasChildrenClass' => 'menu-item--has-children',
10+
'currentItemClass' => 'menu-item--current',
11+
'activeItemClass' => 'menu-item--active',
12+
13+
'itemLinkClass' => 'menu-item-link',
14+
'currentItemLinkClass' => 'menu-item-link--current',
15+
'activeItemLinkClass' => 'menu-item-link--active',
16+
17+
'subMenuClass' => 'navigation-sub-menu',
18+
'level' => 1,
19+
])
20+
221
@php
322
$hasChildren = $item->children && $item->children->isNotEmpty();
423
$isCurrent = $item->isCurrentMenuItem();
524
$isActive = $isCurrent || ($hasChildren && $item->hasActiveChildren());
6-
7-
$classes = collect(['menu-item'])
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'))
11-
->filter()
12-
->implode(' ');
13-
14-
$linkClasses = collect(['menu-link'])
15-
->when($isCurrent, fn($collection) => $collection->push('current'))
16-
->when($isActive, fn($collection) => $collection->push('active'))
17-
->filter()
18-
->implode(' ');
25+
26+
$wrapperTag = $isCurrent
27+
? 'span'
28+
: 'a';
1929
@endphp
2030

21-
<li class="{{ $classes }}">
22-
<a href="{{ $item->getCompleteUrl($locale) }}"
23-
class="{{ $linkClasses }}"
24-
@if($item->getTarget() !== '_self') target="{{ $item->getTarget() }}" @endif
25-
@if($isCurrent) aria-current="page" @endif>
31+
<li @class([
32+
$itemClass,
33+
"menu-item--level-{$level}",
34+
$itemHasChildrenClass => $hasChildren,
35+
$currentItemClass => $isCurrent,
36+
$activeItemClass => $isActive,
37+
])>
38+
<{{ $wrapperTag }}
39+
@if (!$isCurrent) href="{{ $item->getCompleteUrl($locale) }}" @endif
40+
@class([
41+
$itemLinkClass,
42+
"menu-item-link--level-{$level}",
43+
$currentItemLinkClass => $isCurrent,
44+
$activeItemLinkClass => $isActive,
45+
])
46+
@if (!$isCurrent && $item->getTarget() !== '_self') target="{{ $item->getTarget() }}" @endif
47+
@if ($isCurrent) aria-current="page" @endif
48+
>
2649
{{ $item->getDisplayLabel($locale) }}
27-
</a>
28-
29-
@if($hasChildren)
30-
<ul class="menu submenu">
31-
@foreach($item->children as $child)
32-
<x-flexible-pages-menu-item :item="$child" :style="$style" :locale="$locale" />
33-
@endforeach
50+
</{{ $wrapperTag }}>
51+
52+
@if ($hasChildren)
53+
<ul @class([
54+
$subMenuClass,
55+
"navigation-sub-menu--level-{$level}",
56+
])
57+
>
58+
@foreach ($item->children as $child)
59+
<x-flexible-pages-menu-item :item="$child"
60+
:style="$style"
61+
:locale="$locale"
62+
:itemClass="$itemClass"
63+
:itemHasChildrenClass="$itemHasChildrenClass"
64+
:currentItemClass="$currentItemClass"
65+
:activeItemClass="$activeItemClass"
66+
:itemLinkClass="$itemLinkClass"
67+
:currentItemLinkClass="$currentItemLinkClass"
68+
:activeItemLinkClass="$activeItemLinkClass"
69+
:subMenuClass="$subMenuClass"
70+
:level="$level + 1"
71+
/>
72+
@endforeach
3473
</ul>
3574
@endif
36-
</li>
75+
</li>

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

Lines changed: 55 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,57 @@
11
{{-- Default menu template --}}
2+
3+
@props([
4+
/* provided by the component */
5+
'menu',
6+
'items',
7+
'style',
8+
'locale',
9+
10+
/* to tweak the display of the menu */
11+
'wrapWithNav' => true,
12+
'navClass' => 'navigation-menu',
13+
'ulClass' => 'navigation-menu-list',
14+
15+
/* to tweak the display of the individual menu items */
16+
'itemClass' => null,
17+
'itemHasChildrenClass' => null,
18+
'currentItemClass' => null,
19+
'activeItemClass' => null,
20+
'itemLinkClass' => null,
21+
'currentItemLinkClass' => null,
22+
'activeItemLinkClass' => null,
23+
'subMenuClass' => null,
24+
25+
/* optional slots */
26+
'title',
27+
])
28+
229
@if($items && $items->isNotEmpty() && $menu)
3-
<nav class="menu-navigation" role="navigation" aria-label="{{ $menu->name }}">
4-
<ul class="menu">
5-
@foreach($items as $item)
6-
<x-flexible-pages-menu-item :item="$item" :style="$style" :locale="$locale" />
7-
@endforeach
8-
</ul>
9-
</nav>
10-
@endif
30+
@if ($wrapWithNav)
31+
<nav class="{{ $navClass }}" aria-label="{{ $menu->name }}">
32+
@endif
33+
@if (isset($title))
34+
{{ $title }}
35+
@endif
36+
37+
<ul class="{{ $ulClass }}">
38+
@foreach ($items as $item)
39+
<x-flexible-pages-menu-item :item="$item"
40+
:style="$style"
41+
:locale="$locale"
42+
:itemClass="$itemClass"
43+
:itemHasChildrenClass="$itemHasChildrenClass"
44+
:currentItemClass="$currentItemClass"
45+
:activeItemClass="$activeItemClass"
46+
:itemLinkClass="$itemLinkClass"
47+
:currentItemLinkClass="$currentItemLinkClass"
48+
:activeItemLinkClass="$activeItemLinkClass"
49+
:subMenuClass="$subMenuClass"
50+
/>
51+
@endforeach
52+
</ul>
53+
54+
@if ($wrapWithNav)
55+
</nav>
56+
@endif
57+
@endif

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

Lines changed: 0 additions & 36 deletions
This file was deleted.

0 commit comments

Comments
 (0)