1

I'm trying to implement correct highlight condition for route links in nested layouts.

I have the following page which has the following layout structure:

enter image description here

1 - route link in MainLayout

2 - route link in CandidatesLayout

3 - route link in CandidateLayout

As you may see - 1 and 2 links are not highlighted but I need to highlight them also.

I added the following code to each route link:

    link.setHighlightCondition(buildHighLightConditionFor(navigationTarget));

    public static HighlightCondition<RouterLink> buildHighLightConditionFor(Class<?> linkTargetClass) {
        return (link, afterNavigationEvent) -> {
            return afterNavigationEvent
                    .getActiveChain()
                    .stream()
                    .anyMatch(element -> {
                        return element.getClass() == linkTargetClass;
                    });
        };
    }

I did this because I have a Route with @RouteAlias("") as described here https://cookbook.vaadin.com/highlight-link-with-default-route/about

How to extend this code in order to highlight 1 and 2 route links in parent layouts?

UPDATED

@Route(value = "candidates/:profileUuid", layout = CandidateLayout.class)
@AnonymousAllowed
alexanoid
  • 24,051
  • 54
  • 210
  • 410
  • (3) is bold and that means highlighted? Might be easier to see/understand if you would pick some more obvious styling? What is the route of this images? `/candidates/$id/profile`? – cfrick Mar 14 '23 at 17:06
  • yes, (3) is bold and this is what I mean highlighted. Vaadin adds additional style [highlighted] or something like that in this case. I added the view with the route in the question body right now. Thanks! – alexanoid Mar 14 '23 at 17:54

0 Answers0