Vaadin Horizontal MenuBar with Image

Question

Using Vaadin 8 to develop simple application with horizontal menubar on top and grid in the center. I am finding it hard to get a simple Horizontal Menu bar with icon. I am using the default CRUD View example with some modification and here is the snippet below :

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();
}

Appreciate if any one could help me understand layouts and how to fix this issue.

Here is the snapshot the below with weird spacing and layout

It is hard to give you advice, since you do not indicate what is the desired state. There seems to be "About" item with icon in the layout, so apparently it is kind of working. I assume that you would wish the layout to be different, but how? Could you attach sketch indicating desired state. Also could you add link to CRUD View example project which you used. Menu is not standard component in Vaadin, so it is coming from that project. — Tatu Lund, Jun 07 '18 at 05:39
I want to have a horizontal navigation bar with menus at the top right and logo at top left. The problem i am facing is the alignment and I am unable to fix it. — SDS, Jun 07 '18 at 20:57

Vaadin Horizontal MenuBar with Image

0 Answers0