Conversation
| @foreach ($item->children as $child) | ||
| <li class="menu-item"> | ||
| <a href="{{ $child->url }}" @class([ | ||
| 'group/child flex items-center px-6 py-3 text-left leading-snug text-inherit no-underline', |
There was a problem hiding this comment.
Deze group/child mag weg?
|
Je moet nog:
|
| {{ $item->label }} | ||
|
|
||
| @if ($item->children) | ||
| <i class="fa-light fa-chevron-down pl-2"></i> |
There was a problem hiding this comment.
Hier kunnen we nu een SVG van maken! Net zoals in de search bar. Scheelt weer zo'n layout shift,
| <a href="{{ $item->url }}" @class([ | ||
| 'relative flex h-full items-center px-2 text-center text-sm leading-snug text-black no-underline xl:px-4 xl:text-base xl:leading-snug hocus:text-primary', | ||
| 'text-primary' => $item->active || $item->activeParent, | ||
| $item->classes, |
There was a problem hiding this comment.
aria-current toevoegen als het active is. Check sowieso even of je nog andere aria attributen mist met acceptatie
cc012b8 to
3da8f63
Compare
Composer package changes
|
| @@ -1,13 +1,50 @@ | |||
| @if (has_nav_menu('primary_navigation')) | |||
| @php | |||
| $menu = Navi::build('primary_navigation'); | |||
There was a problem hiding this comment.
Ik weet niet waarom dit werkt, maar volgens de documentatie roep je eerst de static method make aan en vervolgens build. PHPStorm geeft momenteel aan dat Navi undefined is. Als je deze importeert krijg je de error dat build niet static is.
Uit de docs:
use Log1x\Navi\Navi;
$menu = Navi::make()->build('primary_navigation');|
|
||
| @if ($item->children) | ||
| <ul | ||
| class="sub-menu ease-base invisible absolute mb-0 min-w-48 -translate-y-3 list-none bg-white pl-0 opacity-0 shadow-md transition-all group-[.js-brave-show-sub-menu]:visible group-[.js-brave-show-sub-menu]:translate-y-0 group-[.js-brave-show-sub-menu]:opacity-100"> |
There was a problem hiding this comment.
Zolang de JS ervoor zorgt dat aria-expanded bijgewerkt wordt bij alle mogelijke manieren om de uitklap te openen kunnen we de styling daar ook op baseren. group-[.js-brave-show-sub-menu] zou dan dus group-has-aria-expanded kunnen zijn. De toepassing van aria-attributen op dit soort componenten zal minder onderhevig zijn aan veranderingen dan class namen. Eventueel zou de groep nog een naam kunnen krijgen om iets duidelijker te maken om welke groep het gaat indien er meerdere zijn.
draft
maar ACF is niet opensource / free volgens mij.