feat: add mega-dropdown component - #166
Conversation
|
Hmm is het een mega menu? of een wide menu? |
There was a problem hiding this comment.
Pull request overview
Adds reusable header dropdown components and introduces a “mega dropdown” variant that’s automatically used when a top-level navigation item has more than 7 children, improving scalability of large menus in the Sage theme header.
Changes:
- Refactors the existing header submenu markup into a shared
dropdown-itemcomponent. - Adds
dropdownandmega-dropdownBlade components and selects between them based on child count (> 7). - Updates header navigation to use the new components instead of inline dropdown markup.
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
web/app/themes/sage/resources/views/components/header/navigation.blade.php |
Switches submenu rendering to dropdown vs mega-dropdown based on number of child items. |
web/app/themes/sage/resources/views/components/header/mega-dropdown.blade.php |
Introduces a fixed-position, multi-column mega dropdown for large child lists. |
web/app/themes/sage/resources/views/components/header/dropdown.blade.php |
Introduces a standard dropdown component for smaller child lists. |
web/app/themes/sage/resources/views/components/header/dropdown-item.blade.php |
Extracts shared child item rendering used by both dropdown variants. |
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
| <x-brave::nav.item> | ||
| <x-brave::nav.link :item="$child" | ||
| {{ $attributes->class([ | ||
| 'group/sub-menu-link flex items-center justify-between gap-6 px-6 py-4 text-left leading-snug text-inherit no-underline', |
There was a problem hiding this comment.
Iets meer ruimte erin gesneakt
"Menu" is niet correct als woord, want dat woord omvat het hele menu. We hebben ook een mobile menu en top bar menu. Dropdown is duidelijker. /taalnazi |
4304a31 to
db33e56
Compare
|
|
||
| <x-brave::nav.dropdown mode="hover" | ||
| {{ $attributes->class([ | ||
| 'ease-base invisible fixed left-1/2 z-10 w-(--container-width) -translate-x-1/2 -translate-y-6 columns-3 gap-x-6 bg-white p-8 opacity-0 shadow-lg transition-all duration-300', |
There was a problem hiding this comment.
Ik ben zelf niet heel erg fan van columns-3. Hoe gaat het bijvoorbeeld als een menu item over 2 regels gaat? (Niet dat het een goed idee is om zulke lange menu items te maken)
Standaard mega menu / dropdown toegevoegd in Brave als er meer dan 7 items in staan.
dropdown.blade.phpenmega-dropdown.blade.phpdropdown-item.blade.phpaangemaakt die in beide dropdown's geinclude wordt