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.
"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)
There was a problem hiding this comment.
@YvetteNikolov Heb je voor columns gekozen vanwege de tab volgorde? Voor Chromium browsers kunnen we dat misschien al oplossen met reading-flow? Gezien de standaard vormgeving heb ik ook het gevoel dat de leesvolgorde op verschillende manieren geïnterpreteerd kan worden. Als we grid gebruiken kunnen we in de toekomst ook gebruik maken van gap styles voor de borders.
Verder zou ik de Tailwind classes zo hoog mogelijk toepassen als child elementen ze kunnen erven. Volgens mij kan de line-height op de hele ul in plaats van op elke a en de borders zou ik op de li doen zodat we makkelijker gebruik kunnen maken van first- en last-child. De text-left class lijkt niets te doen nu, maar kan zijn dat ik iets over het hoofd zie.
The merge-base changed after approval.
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