Btukfyl

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?

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

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 Vaddin Routing 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 = "",...)