To make the menu work, we can implement the addMenuOption(MenuOption, SerializableConsumer<MenuOption>) method as follows:

public class TabBasedApplicationLayout ... {
    ...
    private Collection<String> menuButtonStyles = new HashSet<>();
    ...

    @Override
    public void addMenuOption(MenuOption menuOption,
            SerializableConsumer<MenuOption> clickListener) {
        Button button = new Button(menuOption.getCaption(),
                event -> clickListener.accept(menuOption));
        menuButtonStyles.forEach(button::addStyleName);
        menuLayout.addComponent(button);
    }
    ...
}

This method iterates over the menuButtonStyles collection to add each style to the new button. Lastly, the methods to set styles for menu options and also for the header should look as follows:

public void setHeaderStyleName(String styleName) {
    header.setStyleName(styleName);
}

public void addHeaderStyleName(String styleName) {
    header.addStyleName(styleName);
}

public void setMenuButtonsStyleName(String styleName) {
    menuButtonStyles.clear();
    menuButtonStyles.add(styleName);
    updateMenuButtonsStyle(styleName,
            Component::setStyleName);
}

public void addMenuButtonsStyleName(String styleName) {
    menuButtonStyles.add(styleName);
    updateMenuButtonsStyle(styleName,
            Component::addStyleName);
}

private void updateMenuButtonsStyle(String styleName,
        BiConsumer<Component, String> setOrAddStyleMethod) {
    IntStream.range(0, menuLayout.getComponentCount())
            .mapToObj(menuLayout::getComponent)
            .forEach(component ->
                    setOrAddStyleMethod.accept(
                            component, styleName));
}

The component is now ready! We can use it in any Vaadin application now. You can create a Vaadin application in a similar way as we did in the previous chapter, or use a standard Vaadin Maven archetype. The chapter-02 module includes the webapp submodule, a Vaadin web application. The following is the init method of the UI implementation in the webapp module:

protected void init(VaadinRequest request) {
    TabBasedApplicationLayout layout =
            new TabBasedApplicationLayout("Caption");
    IntStream.range(1, 4)
            .mapToObj(i -> new Label("Component " + i))
            .map(l -> new ApplicationLayout.WorkingAreaComponent(
                    l.getValue(), l))
            .forEach(c -> layout.addMenuOption(
                    new ApplicationLayout.MenuOption(
                            c.getCaption()),
                    (option) ->
                            layout.addWorkingAreaComponent(
                                    c, true)));
    layout.setMenuButtonsStyleName(ValoTheme.BUTTON_LINK);
    setContent(layout);
}

Remember to add the api dependency to the pom.xml file of the webapp module before compiling and running the application again:

<dependency>
    <groupId>packt.vaadin.datacentric.chapter02</groupId>
    <artifactId>api</artifactId>
    <version>1.0-SNAPSHOT</version>
</dependency>

Although we have learned how to build a bare-bones main screen in the previous sections by using the core of Vaadin Framework, you should consider using the SideMenu Add-on published in the Vaadin Directory website (https://vaadin.com/directory/component/sidemenu-add-on). This component allows you to quickly implement side menus like the one in the official dashboard demo you can see at https://demo.vaadin.com/dashboard.