[SideNav] Allow matching routes with dynamic parameters

[sissbruecker]

trafficstars

Describe your motivation

Currently side nav items need a concrete URL without parameters / placeholders in order to determine whether they match the current URL and should thus be highlighted. However you might also want an item to match a route with dynamic path parameters, where the parameter can take an unknown number of values.

For example, an application could have:

• a product list view /products
• a product detail view /products/:productId

In that case you might want to use a single nav item "Products" that matches both:

• the path for the item would be /products
• a path alias for the item would be /products/:productId
• the item would be highlighted when navigating to the product overview, and clicking it navigates to product overview
• the item would also be highlighted when navigating to any product detail /products/1, /products/2, /products/3, ...

Describe the solution you'd like

I can think of two solutions:

• Allow dynamic parameters / placeholders / wildcards in path aliases and implement a matching algorithm that can match a specific URL against those
• Allow to control the current state of each item manually. For example, allow to provide a callback for each item that calculates whether the item matches the current route or not. When navigation happens, run each callback and set the current state based on the result. While not as convenient as the first option, this would be more flexible and could handle complex cases that we can not anticipate or support with a generic matching implementation.

Describe alternatives you've considered

No response

Additional context

Dynamic parameters can not be part of the "main" path, as we need a concrete URL here for the side nav item's anchor tag, so these can only be supported for path aliases.

[Legioth]

One additional thing to keep in mind is that the additional paths might or might not be based on the same view class. In other words, there are two different ways of implementing the case described here:

1. Everything is one class. ProductsView.class handles both /products and /products/1
2. There are separate classes. ProductListView.class handles /products while ProductDetails.class handles /products/1.

In either case, the item that links to /products should remain highlighted also when navigated to /products/1.

Could also note that it seems like this almost works already since the previous item remains highlighted after navigation (probably because no other item was highlighted) but there will be no highlighted item after reloading the page.

[edler-san]

I am very much in favour of this being implemented. I'd even argue this is a bug as the documentation has no qualifying statement that this is limited to particular types of routes.