Add helper for automatically highlighting the active item in a menu

Automatically highlighting the active part in e.g. a menu hierarchy can already be done manually by making the menu or individual links implement AfterNavigationObserver and then manually toggle a css classname or an attribute.

In the general case, menu items can be represented by any kind of component and there can also be arbitrary logic for when a section is considered to be active. In practice, the menu items are usually RouterLink components and the hierarchy is either defined based on the URL structure or sharing a common RouterLayout (though in most cases the topmost layout is shared among the entire application).

We could add helper API to RouterLink for the common cases and ensure the documentation also contains an example of how this is done manually.

[Legioth]

Some ideas on what the API in RouterLink could look like:

// Low level flexible API based on BiPredicate<RouterLink, AfterNavigationEvent>
someLink.setHighlightCondition((link, event) -> event.getLocation().getPath().startsWith("foo"));

// Helper for creating conditions
someLink.setHighlightCondition(HighlightConditions.sameLocation()); // This could be used by default?
someLink.setHighlightCondition(HighlightConditions.locationPrefix("foo"));
someLink.setHighlightCondition(HighlightConditions.locationPrefix()); // Uses the URL of this link as the prefix
someLink.setHighlightCondition(HighlightConditions.hasLayout(SomeLayout.class));

// Configuring how the highlight is represented in the DOM
someLink.setHighlightClassName("link-active"); // default is null
someLink.setHighlightAttribute("link-active"); // default is "active"

Edit: Renamed APIs to use highlight instead of active

[Legioth]

Anything that is currently attached to the component tree will receive navigation events if they implement the appropriate interface.