vaadin-side-nav-item wont add current attributes if application is under contextPath

[LaplusIjns]

Description

I’m using Hilla with React.
But the original bug seems to come from this repository.
If the application uses a context path,
server.servlet.context-path=/example
in application.properties

for example /example with subpages /page1 and /page2,

React code like this

  <SideNav onNavigate={({ path }) => navigate(path!)} location={location}>
    {createMenuItems().map(({ to, title, icon }) => (
      <SideNavItem path={to} key={to}>
        {icon ? <Icon src={icon} slot="prefix"></Icon> : <></>}
        {title}
      </SideNavItem>
    ))}
  </SideNav>

then navItem with url /example can correctly add the current attribute and appear highlighted.
However, if navItem with url /example/page1, it should theoretically also have current added, but it doesn’t.

it's seems vaadin-side-nav-item.js __isCurrent methods with matchPaths logic is not work correctly

Expected outcome

If app deploy at /example and have page1
then it should hightlight if im also at /example/page1

Minimal reproducible example

  <SideNav onNavigate={({ path }) => navigate(path!)} location={location}>
    {createMenuItems().map(({ to, title, icon }) => (
      <SideNavItem path={to} key={to}>
        {icon ? <Icon src={icon} slot="prefix"></Icon> : <></>}
        {title}
      </SideNavItem>
    ))}
  </SideNav>

Steps to reproduce

add server.servlet.context-path=/example at application.properties
add page1.tsx ... at views folder
then go to /example/page1

the side nav element with path /example/page1 should hightlight

Environment

Vaadin version(s): 25.0.3
OS: windows11

Browsers

hihtlight if at context path

not hightlight

[sissbruecker]

Can you please check what is passed as location={location} to the component in both cases (index + page1)? Also what path={to} is for both side nav items.

[LaplusIjns]

The issue can be reproduced with the simplest @layout.tsx, such as the default one generated by start.vaadin.com/app/p
The location value actually comes from react-router’s useLocation().

import { createMenuItems, useViewConfig } from '@vaadin/hilla-file-router/runtime.js';
import { effect, signal } from '@vaadin/hilla-react-signals';
import { AppLayout, DrawerToggle, Icon, SideNav, SideNavItem } from '@vaadin/react-components';
import { Suspense, useEffect } from 'react';
import { Outlet, useLocation, useNavigate } from 'react-router';

const documentTitleSignal = signal('');
effect(() => {
  document.title = documentTitleSignal.value;
});

// Publish for Vaadin to use
(window as any).Vaadin.documentTitleSignal = documentTitleSignal;

export default function MainLayout() {
  const currentTitle = useViewConfig()?.title;
  const navigate = useNavigate();
  const location = useLocation();

  useEffect(() => {
    if (currentTitle) {
      documentTitleSignal.value = currentTitle;
    }
  }, [currentTitle]);

  return (
    <AppLayout primarySection="drawer">
      <div slot="drawer" className="flex flex-col justify-between h-full p-m">
        <header className="flex flex-col gap-m">
          <span className="font-semibold text-l">My App</span>
          <SideNav onNavigate={({ path }) => navigate(path!)} location={location}>
            {createMenuItems().map(({ to, title, icon }) => (
              <SideNavItem path={to} key={to}>
                {icon ? <Icon src={icon} slot="prefix"></Icon> : <></>}
                {title}
              </SideNavItem>
            ))}
          </SideNav>
        </header>
      </div>

      <DrawerToggle slot="navbar" aria-label="Menu toggle"></DrawerToggle>
      <h1 slot="navbar" className="text-l m-0">
        {documentTitleSignal}
      </h1>

      <Suspense>
        <Outlet />
      </Suspense>
    </AppLayout>
  );
}
}

And when at /example
the location value

{
    "pathname": "/",
    "search": "",
    "hash": "",
    "state": null,
    "key": "0dsvuku9"
}

the to is come from createMenuItems()
which json like below

[
    {
        "to": "",
        "icon": "line-awesome/svg/file.svg",
        "title": "@index",
        "order": 0,
        "detail": null
    },
    {
        "to": "/page1",
        "icon": "line-awesome/svg/globe-solid.svg",
        "title": "page1",
        "order": 1,
        "detail": null
    }
]

And when at /example/page1 location output this

{
    "pathname": "/page1",
    "search": "",
    "hash": "",
    "state": null,
    "key": "qinm95ve"
}

The to value is the same as the one defined in the createMenuItems() JSON above.

thx!

[sissbruecker]

Thanks for the information. I gave it a try, and the issue is that the paths passed to the side nav items start with a /, which makes the URL matching interpret them as absolute paths, rather than from the context root. It will require some additional investigation on whether:

• The Side Nav component itself can make assumptions that these absolute paths should be interpreted as relative from the context root / base URI
• Or whether relative paths should actually be defined as relative paths by the application / framework, without a preceding /. That would at least be according to spec and not break use cases where someone actually wants to configure an absolute path that "escapes" the current application's context root.

For now a workaround seems to be to make the paths relative in the application logic:

<SideNavItem path={to.substring(1)} key={to}>
  {icon ? <Icon src={icon} slot="prefix"></Icon> : <></>}
  {title}
</SideNavItem>

[sissbruecker]

For internal reference, the problem does not occur with the Flow implementation. Neither with the MenuConfiguration.getMenuEntries() counter-part, nor when passing view classes to side nav items directly. As such, this looks like a flaw in the createMenuItems function of the Hilla file router. In other cases users can specify a relative or absolute path string directly, depending on what they are trying to accomplish.

[LaplusIjns]

I tried a few ways to work around it, but they didn’t work
I really appreciate the workaround method you provided！