SideNav highlighter Problem

Flow
1

I’ve a subNavItem and when I click that, it is highlighted which is good. But when I directly hit the subNavItem address in the URL, it is not. I do not see the parent also getting highlighted. Is this a bug ?
image.png

2

image.png

3

image.png

4

it happens only for the subNavItem

5

It looks like it might be highlighted, but it’s not visible because the parent item is collapsed.

6

is it the expected behavior ?

7

I thought the parent will expand automatically

8

In the business app, it is how it is

9

https://labs.vaadin.com/business/accountants

10

That’s the current behavior and I don’t know of any feature request saying something different

11

Any quick fix to expand the parent ?

12
  • add a AfternavigationListener to the nav item
  • check if it has a parent → if yes → toggle parent if not opened
13

I tried something like this ``` @Override
public void afterNavigation(AfterNavigationEvent afterNavigationEvent) {
log.debug(“I’m here”,afterNavigationEvent.getLocation().getPath());

    nav.getItems().stream().filter(sideNavItem ->
            sideNavItem.getPath().equals(afterNavigationEvent.getLocation().getPath()))
            .findFirst()
            .ifPresent(sideNavItem -> {
                sideNavItem.setVisible(true);
                sideNavItem.setExpanded(true);
            });
}``` but no luck
14

I think you need to get the parent, which will not equal the path.
Debug to see if sideNavItem.getParent() returns a SideNavItem, if it does, use that - expand it.
If it doesn’t, you can modify your filter to be something like this.

nav.getItems().stream().filter(sideNavItem ->
afterNavigationEvent.getLocation().getPath()).contains(sideNavItem.getPath()))
15

sideNavItem.getParent() returns a Component

16

SideNavItem extends Component, did you debug or look at the API?

17

I saw this
image.png

18

and then tried this

19

Yeah, that’s the API. Do you know how to run in debug mode?
You can of course just test by logging messages as well.

.ifPresent(sideNavItem -> {
    if (sideNavItem.getParent().isPresent()) {
        log.warn("there is a parent");
        boolean isParentASideNavMenu = sideNavItem.getParent().get() instanceof SideNavItem;
        log.warn("is the parent a side nav menu item? " + isParentASideNavMenu);
        if (isParentASideNavMenu) {
            SideNavItem parent = (SideNavItem) sideNavItem.getParent().get();
            parent.setExpanded(true);
        }
    } else {
        log.warn("there is no parent");
    }
});
20

this method itself is not getting executed
image.png