AppLayout with Drawer and seperate MenuBar -> Deselect Drawer-Item

Hello vaadin-pros

I have an Applayout with a drawer as shown in the vaadin documentation

private void createDrawer() {
    final H1 applicationName = new H1(FortyloveApplication.APP_NAME);
    applicationName.addClassNames(LumoUtility.FontSize.LARGE, LumoUtility.Margin.NONE);
    final Header header = new Header(applicationName);

    final Scroller scroller = new Scroller(createNavigation());

    addToDrawer(header, scroller, createFooter());
}

In the navBar of the AppLayout I have a seperate MenuBar for user-settings like “Profile”, “Settings” and such that all navigate to a new view. These views are not in the drawer however.

If I navigate to one of my views from the drawer that view in the navigation gets highlighted. So far so good. If i navigate to one of my user-settings views through my navBar MenuBar however, the drawer-link stays highlighted, even though I’m not on that view anymore.

Can I somehow deselect the selected drawer menuitem?

See my drawer selection and my MenuBar (top-right) in screenshot.
image.png

are you using a SideNav for the navi in the drawer?

hi rolf, sorry for answering this late

i am using a sidenav yes. i have attached my MainLayout.java class where the nav aswell as that usermenu on the top right is constructed
https://pastebin.com/bnjXrMfB

Right, so the SideNav tries to match the current page URL with the path defined for the current view to determine which nav-item should be highlighted as the current one. So if the highlight isn’t changing, that indicates that the page URL isn’t changing.

Does the view that is opened through the MenuBar have a @Route annotation defining a path for it?

this is one of the views from the MenuBar

@Route(value = UserProfileView.ROUTE, layout = MainLayout.class)
@PageTitle(UserProfileView.PAGE_TITLE)
@PermitAll
public class UserProfileView extends VerticalLayout {

    @Nonnull public static final String ROUTE = "userprofile";
    @Nonnull public static final String PAGE_TITLE = "Benutzerprofil";

    public UserProfileView() {
    }
}

the view has its own url lilke this
image.png

from my MainLayout.java, this is how i navigate to the userprofile view through the click-listener

final MenuItem menuItem = subMenu.addItem(icon, clickEvent -> UI.getCurrent().navigate(route));

maybe the way i navigate is incorrect and the sidenav doesnt notice this?

after i press f5 to reload the page, the sidenav deselects the view correctly, doing what you said above with the matching of the url

what if you pass the class to navigate instead of the route string?

e.g. UI.getcurrent().navigate(UserProfileView.class);

unfortunately, no change

final MenuItem menuItem = subMenu.addItem(icon, clickEvent -> UI.getCurrent().navigate(UserProfileView.class));

hmm, that does seem to work in the latest V24.2.0 alpha, so it’s probably been fixed since

(both with route string and class, that is)

im on 24.1.6, is there any way for me to get onto that alpha to test it out with my app?

sure, you just bump the vaadin version in your pom.xml to 24.2.0.alpha11, and make sure you have prerelease repos enabled in the pom as well:

    <repositories>
        <repository>
            <id>vaadin-prereleases</id>
            <url>https://maven.vaadin.com/vaadin-prereleases</url>
            <snapshots>
                <enabled>true</enabled>
            </snapshots>
        </repository>
        <repository>
            <id>Vaadin Directory</id>
            <url>https://maven.vaadin.com/vaadin-addons</url>
            <snapshots>
                <enabled>false</enabled>
            </snapshots>
        </repository>
    </repositories>

    <pluginRepositories>
        <pluginRepository>
            <id>vaadin-prereleases</id>
            <url>https://maven.vaadin.com/vaadin-prereleases</url>
            <snapshots>
                <enabled>true</enabled>
            </snapshots>
        </pluginRepository>
    </pluginRepositories>

(or you can download an app started based on the alpha from start.vaadin.com by going to Settings and switching from “24.1” to “24.2 (pre)”)

thanks rolf, i’ll try this

When playing around with this (have not yet tried the alpha version), i came across another related problem.

one of my views has the following annotations:

@Route(value = BookingView.ROUTE, layout = MainLayout.class)
@RouteAlias(value = "", layout = MainLayout.class)

the navigation correctly selects the menu item when on the official route url (BookingView.ROUTE). but not when on the route alias which is just www.site.ch/.
regarding the logic of the sidenav by comparing the url to the route annotation this makes sense.

however, is it possible to let the sidenav also let the item be selected when i am accessing the same view through the @RouteAlias url?

Sure also possible with 24.2.

bump the vaadin version in your pom.xml to 24.2.0.alpha11

I bumped the version and updated the repos and I am getting not found errors. Is there a chance the folder is missing or is the version incorrect or updated now?

UPDATE: Did the start.vaadin.com thing and found 24.2.0.alpha7 instead, tried it and it is downloading

UPDATE: And the SideNavItem updates to active when a Anchor is clicked by the user.

Thank you to whoever fixed this!