SideNav doesn't work with HTTP links to pages in the same application.

[FDelporte]

Description

When navigating from https://api.pi4j.com/system-information in the left menu to https://api.pi4j.com/swagger-ui/index.html, I first get "Could not navigate to 'swagger-ui/index.html'" but it's OK after a refresh... Idem for the link to "Open API".

Additional note: would be great if SideNavItem would allow to add a target="_blank". But I see, there is already a ticket for this: #5091

Expected outcome

Should open the page without error message

Minimal reproducible example

    private SideNav createNavigation() {
        SideNav nav = new SideNav();

        nav.addItem(
                new SideNavItem("Board Information", BoardInfoView.class, VaadinIcon.DATABASE.create()),
                new SideNavItem("System Information", SystemInfoView.class, VaadinIcon.INFO.create()),
                new SideNavItem("Open API", "https://api.pi4j.com/api/docs/pi4j", VaadinIcon.GLOBE.create()),
                new SideNavItem("Swagger UI - API", "https://api.pi4j.com/swagger-ui/index.html", VaadinIcon.GLOBE.create()),
                new SideNavItem("Pi4J Docs", "https://pi4j.com", VaadinIcon.GLOBE.create())
        );

        return nav;
    }

Full project is available here:
https://github.com/Pi4J/pi4j-board-info-service/blob/main/src/main/java/com/pi4j/boardinfoservice/views/BaseLayout.java#L55

Steps to reproduce

Application with the above code works OK for link 1, 2 and 5.
Other links give an error.

Environment

Vaadin version(s): 24.1.1
OS: Linux

Browsers

Firefox, Safari

[ugur-vaadin]

I could not reproduce the issue using the example or the project. Can you please confirm if the issue still persists on your side? @FDelporte

[FDelporte]

@ugur-vaadin yes, still exists in https://api.pi4j.com/, sources on https://github.com/Pi4J/pi4j-board-info-service/blob/main/src/main/java/com/pi4j/boardinfoservice/views/BaseLayout.java#L61

Happens both in Firefox and Safari on macOS.

Did you use a newer Vaadin version to test?

[vursen]

After an internal discussion, we've agreed that it would be beneficial to have an explicit API for marking side nav items to be ignored by the Vaadin router. The API can be also useful when you need an item to cause a full page refresh even though it points to a valid route. Since the Anchor component already has this API, it makes sense to take it as a reference.

Web component API:

<side-nav-item path="https://api.pi4j.com/swagger-ui/index.html" router-ignore>
  Swagger UI - API
</side-nav-item>

Flow component API:

SideNavItem sideNavItem = new SideNavItem(
    "Swagger UI - API", 
    "https://api.pi4j.com/swagger-ui/index.html"
);
sideNavItem.setRouterIgnore(true);