How to create a vertical menu bar in the left side and content is displayed in the right side in vaadin 10

Question

With Vaadin 10 is there a way to achieve this? Or else vaadin-10 is only supporting top menus? I am very curious about this topic.

When I am having a parent layout in a tree like this MainView -> MenuBar -> MenuItemPage(for example main view -> menubar -> homepage(route="home"))

It always displays the content below the menu. Not at the side of the menu. My MainView is a horizontal layout. What I want to do is when someone is loading wwww.mydomain.com/home it should load the home page next to the menu bar. Not below the menu bar.

Is there a way to do that or am I am trying something impossible?

Please add the code, that does not work as expected to your question. — cfrick, Aug 15 '18 at 08:31

score 3 · Answer 1 · edited Aug 15 '18 at 09:26

3

There is no limitation how to compose menu templates, there is no such template built in Vaadin 10 or 11 platform yet, but there is one add on already that does it.

https://vaadin.com/directory/component/app-layout-addon

Or more elaborate:

https://vaadin.com/directory/component/hybridmenu

edited Aug 15 '18 at 09:26

cfrick

35,203
6
56
68

answered Aug 15 '18 at 09:01

Tatu Lund

9,949
1
12
26

score 1 · Answer 2 · edited Nov 30 '20 at 18:00

I found this one nicer: https://vaadin.com/directory/component/app-layout-add-on

It is compatible with Vaadin 11 (also V10 and V8) and more important, it is based compatible with Vaadin Router API.

<dependency>
   <groupId>com.github.appreciated</groupId>
   <artifactId>app-layout-addon</artifactId>
   <version>2.0.0</version>
</dependency>

Here is the code example for Vaadin 11 (and 10): https://github.com/appreciated/vaadin-app-layout/tree/master/app-layout-examples/app-layout-plain-example

Start with extending AppLayoutRouterLayout on your main layout (I also removed the default routing from my main layout, but up to you) and continue with the plain example above.

The following is a sample code based on the above example;

    import com.github.appreciated.app.layout.behaviour.Behaviour;
    import com.github.appreciated.app.layout.builder.AppLayoutBuilder;
    import com.github.appreciated.app.layout.component.appbar.AppBarBuilder;
    import com.github.appreciated.app.layout.component.appmenu.MenuHeaderComponent;
    import com.github.appreciated.app.layout.component.appmenu.left.LeftClickableComponent;
    import com.github.appreciated.app.layout.component.appmenu.left.LeftNavigationComponent;
    import com.github.appreciated.app.layout.component.appmenu.left.builder.LeftAppMenuBuilder;
    import com.github.appreciated.app.layout.design.AppLayoutDesign;
    import com.github.appreciated.app.layout.notification.DefaultNotificationHolder;
    import com.github.appreciated.app.layout.notification.component.AppBarNotificationButton;
    import com.github.appreciated.app.layout.router.AppLayoutRouterLayout;
    import com.vaadin.flow.component.icon.VaadinIcon;

    import static com.github.appreciated.app.layout.entity.Section.HEADER;

    public class MainLayout
            extends AppLayoutRouterLayout {//https://vaadin.com/directory/component/app-layout-add-on
        private static DefaultNotificationHolder notifications = new DefaultNotificationHolder(newStatus -> {
        });

        @Override
        public com.github.appreciated.app.layout.behaviour.AppLayout getAppLayout() {
            return AppLayoutBuilder
                    .get(Behaviour.LEFT_HYBRID_SMALL)// There some other behaviours too
                    .withTitle("Header")
                    .withAppBar(AppBarBuilder
                            .get()
                            .add(new AppBarNotificationButton(VaadinIcon.BELL, notifications))
                            .build())
                    .withDesign(AppLayoutDesign.MATERIAL)
                    .withAppMenu(LeftAppMenuBuilder
                            .get()
                            .addToSection(new MenuHeaderComponent("Menu-Header",
                                    "Version 2.0.1",
                                    null
                            ), HEADER)
                            .addToSection(new LeftClickableComponent("Set Behaviour HEADER",
                                    VaadinIcon.COG.create(),
                                    clickEvent -> openModeSelector()
                            ), HEADER)
                            .add(new LeftNavigationComponent("Home", VaadinIcon.HOME.create(), View1.class))
                            .build())
                    .build();

        }
        
        private void openModeSelector() {
            // the code to open a dialog
        }

    }

in which the View1 class is just a simple layout;

    @Route(value = "", layout = MainLayout.class)
    public class View1 extends VerticalLayout {

        public View1() {
            Paragraph label = new Paragraph("Hi!");
            label.setWidth("100%");
            add(label);
        }
    }

Also, make sure to have a view as the default (@Route(value = "",...)

How to create a vertical menu bar in the left side and content is displayed in the right side in vaadin 10

2 Answers2