Navigation component: Store navigation tree in context #25292
Conversation
david-szabo97
added
[Type] Feature
david-szabo97
requested review from
vindl,
Copons,
jeyip,
noahtallen and
Addison-Stavlo
|
Size Change: +368 B (0%) Total Size: 1.2 MB
ℹ️ View Unchanged
|
|
|
||
| setNavigationItems( items ); | ||
| setNavigationMenus( menus ); | ||
| }, [] ); |
There was a problem hiding this comment.
Children might change after mount (e.g. dynamically fetched menu items), so we can't use the empty dependency array here.
But children is not a primitive, so using it as a dependency would run useEffect at every render, which might be a performance problem.
I'm not sure how to solve this conundrum, though. 🤔
| }; | ||
|
|
||
| return innerRecursion( initialChildren, null ); | ||
| }; |
There was a problem hiding this comment.
I'll happily leave someone else to review the recursion. 😄
|
I think this is getting to a good place. Some other points of discussions:
const navigationTree = {
menu1: {
...props,
children: {
item1: { ...props },
item2: { ...props },
}
},
};
|
Agreed, we might want to change the data structure behind the scenes so an abstraction is always a good idea to keep it compatible.
Nested structure is a nightmare to work with. I don't see any pros using a nested structure for storing the data. We can easily access anything we want with key-based approach. Though we could have both structure available.
A unique ID is a must for easy management IMO. Without that many tasks would become impossible or hacky.
Yeah sure. That sounds a good idea. Though I'm not sure if you can utilise it in your PR the way you would like to do. |
All right, let's assume that
Yeah I guess marking items with their |
|
Closing this as replaced by #25340 |
Fixes: #25246
Description
Adds
itemsandmenusto the Navigation context.Example usage: Change back button label to the parent menu's title
packages/components/src/navigation/menu.jsBoth
itemsandmenusare objects.Keys are based on the
itemprop foritemsand they are based onmenuprop formenus. This makes them easily accessible by their slug.Values are the props of the
NavigationItemandNavigationMenuitems without thechildrenprop. Items also include the menu that contains the item asmenuproperty.Types of changes
New feature (non-breaking change which adds functionality)
Checklist: