如何在vaadin 8中实现移动友好的菜单栏？

import com.vaadin.annotations.Theme;
import com.vaadin.navigator.Navigator;
import com.vaadin.navigator.View;
import com.vaadin.navigator.ViewChangeListener;
import com.vaadin.server.Responsive;
import com.vaadin.server.VaadinRequest;
import com.vaadin.ui.*;

@Theme("valo")
public class MenuBarExample extends UI {

    @Override
    protected void init(VaadinRequest request) {
        VerticalLayout menuLayout = new VerticalLayout();
        menuLayout.setStyleName("menu-bar");

        Button homeButton = new Button("Home");
        homeButton.setIcon(VaadinIcons.HOME);
        homeButton.addClickListener(e -> getNavigator().navigateTo("home"));

        Button aboutButton = new Button("About");
        aboutButton.setIcon(VaadinIcons.INFO);
        aboutButton.addClickListener(e -> getNavigator().navigateTo("about"));

        menuLayout.addComponent(homeButton);
        menuLayout.addComponent(aboutButton);

        setContent(menuLayout);

        Navigator navigator = new Navigator(this, this);
        navigator.addView("home", new HomeView());
        navigator.addView("about", new AboutView());

        Responsive.makeResponsive(this);
        if (Responsive.isMobile()) {
            menuLayout.setMargin(true);
            menuLayout.setSpacing(true);
            menuLayout.setWidth("100%");
            menuLayout.setHeightUndefined();
        } else {
            menuLayout.setMargin(false);
            menuLayout.setSpacing(false);
            menuLayout.setWidthUndefined();
            menuLayout.setHeight("100%");
        }
    }

    public class HomeView extends VerticalLayout implements View {
        @Override
        public void enter(ViewChangeListener.ViewChangeEvent event) {
            // Add home view content here
        }
    }

    public class AboutView extends VerticalLayout implements View {
        @Override
        public void enter(ViewChangeListener.ViewChangeEvent event) {
            // Add about view content here
        }
    }
}