Vaadin水平MenuBar与图像

Question

使用Vaadin 8开发简单的应用程序，顶部是水平菜单栏，中间是网格。我发现很难得到一个带图标的简单水平菜单栏。我正在使用默认的CRUD View示例进行一些修改，下面是以下代码段：

public MainScreen(MyUI ui) {

    setSpacing(false);
    setStyleName("main-screen");
    setMargin(false);
    setSizeFull();
    addComponent(getMenu());

    HorizontalLayout menuLayout = new HorizontalLayout();
    menuLayout.addStyleName("valo-content");
    menuLayout.setWidth("100%");
    menuLayout.setSpacing(false);

    HorizontalLayout viewContainer = new HorizontalLayout();
    viewContainer.addStyleName("valo-content");
    viewContainer.setWidth("100%");

    final Navigator navigator = new Navigator(ui, viewContainer);
    navigator.setErrorView(ErrorView.class);
    menu = new Menu(navigator);
    menu.addView(new SampleCrudView(), SampleCrudView.VIEW_NAME, SampleCrudView.VIEW_NAME, VaadinIcons.EDIT);
    menu.addView(new AboutView(), AboutView.VIEW_NAME, AboutView.VIEW_NAME, VaadinIcons.INFO_CIRCLE);

    navigator.addViewChangeListener(viewChangeListener);

    Image image = new Image(null, new ThemeResource("img/example.jpg"));

    menuLayout.addComponent(image);
    menuLayout.addComponent(menu);
    menuLayout.setSizeFull();

    addComponent(menuLayout);
    addComponent(viewContainer);
    setExpandRatio(menuLayout, 1);
    setSizeFull();
}

感谢是否有人可以帮助我理解布局以及如何解决此问题。

以下是具有奇怪间距和布局的快照