Want to change the backgroung color (or put the text on bold) to the current VAADIN menu bar item selection

Question

I want to put a different color when my menu item has been selected. My menu is :

For that, the code is :

  /**
     * Create a Vertical Menu with the Home page and Actions page
     */
    public MenuBar createMenu() {
        MenuBar menuBar = new MenuBar();
        menuBar.addItem(StringConstants.MENU_HOMEPAGE_LABEL, VaadinIcons.HOME, createCommandHomepage());
        menuBar.addItem(StringConstants.MENU_ACTIONS_LABEL, VaadinIcons.TABLE, createCommandActions());
        menuBar.addItem(StringConstants.MENU_LOG_OUT_LABEL, VaadinIcons.SIGN_OUT, createCommandLogOut());
        return menuBar;
    }

    /**
     * Create the command when the Home page has been selected in the menu
     */
    private Command createCommandHomepage() {
        return new Command() {
            @Override
            public void menuSelected(final MenuBar.MenuItem selectedItem) {
                selectedItem.setStyleName("caption");
                UI.getCurrent().getNavigator().navigateTo(StringConstants.HOMEPAGE_VIEW_NAME);
            }
        };
    }
    /**
     * Same for the Action and Log out - it's not important to show the code here
     */

So I tried to put the current selection in bold (I tried to change the background too).

So My scss code was :

.v-menubar-menuitem-selected{
          font-weight: bold;
    }

    .caption {
        font-weight: bold;
    }

And this is not working at all. However :

.v-menubar-menuitem-caption{
          font-weight: bold;
    }

is working, but it will put all captions in bold, not just the current selection.

I don't know what I did wrong.

EDIT : I compile the vaadin theme :

        <plugin>
            <groupId>com.vaadin</groupId>
            <artifactId>vaadin-maven-plugin</artifactId>
            <version>8.0.6</version>
            <executions>
                <execution>
                    <goals>
                        <goal>update-theme</goal>
                        <goal>update-widgetset</goal>
                        <goal>compile</goal>
                        <goal>compile-theme</goal>
                    </goals>
                </execution>
            </executions>
        </plugin>

However, I run a maven clean package to be sure that I build the theme.

EDIT 2 : Vaadin version from pom.xml :

<dependency>
    <groupId>com.vaadin</groupId>
    <artifactId>vaadin-bom</artifactId>
    <version>8.0.4</version>
    <type>pom</type>
    <scope>import</scope>
</dependency>

Answer 1

From Vaadin 8 Docs :

...beware that the selected style for menu items, that is, v-menubar-menuitem-selected , is reserved for mouse-hover indication.

Try this:

.myTheme .v-menubar-menuitem-highlight {
    background: #000040;
}

and in code:

menuBar.addStyleName("myTheme");

Also remember to clear cache from your browser.

Answer 2

This solution is working. But, I think it's not the better one. So, please, provide a better answer.

I use the session to save the menu level :

String menuTabSelected =(String)VaadinSession.getCurrent().getAttribute("menuState");
MenuBar barmenu = new MenuBar();
barmenu.addStyleName("mybarmenu");
layout.addComponent(barmenu);

String homepageStyle = menuTabSelected == null || menuTabSelected.equals(StringConstants.MENU_HOMEPAGE_LABEL) ? "highlight" : null;

barmenu.addItem(StringConstants.MENU_HOMEPAGE_LABEL, VaadinIcons.HOME, createCommandHomepage()).setStyleName(homepageStyle);


private Command createCommandHomepage() {
    return new Command() {
        @Override
        public void menuSelected(final MenuItem selectedItem) {

            VaadinSession.getCurrent().setAttribute("menuState", selectedItem.getText());

            UI.getCurrent().getNavigator().navigateTo(StringConstants.HOMEPAGE_VIEW_NAME);
        }
    };
}

In mytheme.scss :

.mybarmenu .v-menubar-menuitem-highlight {
    background: #dedede;
    font-weight: bold;
}