Why are the drawer at the right side, when I want it to be on the left side?

[DanielMartensson]

Hello!

This code snippet

.withAppBar(AppBarBuilder.get()
                        .add(new LeftClickableItem("Menu", VaadinIcon.MENU.create(), clickEvent -> toggleDrawer()))
                        .build())

Resulting this behaviour.

1. The drawer button is on the wrong side.
2. When I press the drawer button, then the other parts of the contents will not move. I want it to happen. The "...View.class" are extended with "VertialLayout"

Great library by the way! I like it! :)

The complete code

public class MenuLayout extends AppLayoutRouterLayout<LeftLayouts.LeftResponsive> {
    /**
     * 
     */
    private static final long serialVersionUID = 1L;

    public MenuLayout() {

        init(AppLayoutBuilder.get(LeftLayouts.LeftResponsive.class)
                .withAppBar(AppBarBuilder.get()
                        .add(new LeftClickableItem("Menu", VaadinIcon.MENU.create(), clickEvent -> toggleDrawer()))
                        .build())
                .withAppMenu(LeftAppMenuBuilder.get()
                        .addToSection(HEADER,
                                new LeftHeaderItem("Test Data", "Version 1.0", "images/BarPicture.png")
                        )
                        .add(LeftSubMenuBuilder.get("Bank 515", VaadinIcon.PLUS.create())
                                        .add(new LeftNavigationItem("LX Data", VaadinIcon.DATABASE.create(), LxDataView.class),
                                             new LeftNavigationItem("LX Curve", VaadinIcon.LINE_CHART.create(), LxCurveView.class),
                                             new LeftNavigationItem("RS Data", VaadinIcon.DATABASE.create(), RsqDataView.class))
                                        .build())
                        .addToSection(FOOTER, 
                                new LeftClickableItem("Logout", VaadinIcon.SIGN_OUT.create(), clickEvent -> UI.getCurrent().getPage().setLocation(SecurityConfiguration.LOGOUT))
                        )
                        .build())
                .build());       
    }
}

[watho]

Hi, try to remove your own AppBar with the drawer button. It is created automatically for you. A custom AppBar is per default on the right side for e.g. a company logo.

[DanielMartensson]

Hi, try to remove your own AppBar with the drawer button. It is created automatically for you. A custom AppBar is per default on the right side for e.g. a company logo.

Sorry! I tried that. Did not work.

@PWA(name = "Vaadin Test Bench Data", shortName = "Test Bench Data")
@Theme(value = Lumo.class, variant = Lumo.DARK)
@Component
@UIScope
public class MenuLayout extends AppLayoutRouterLayout<LeftLayouts.LeftResponsive> {
    /**
     * 
     */
    private static final long serialVersionUID = 1L;

    public MenuLayout() {
        init(AppLayoutBuilder.get(LeftLayouts.LeftResponsive.class)

                .withAppMenu(LeftAppMenuBuilder.get()
                        .addToSection(HEADER,
                                new LeftHeaderItem("Test Bench Data", "Version 1.0", "images/BarPicture.png")
                        )
                        .add(LeftSubMenuBuilder.get("Bänk 515", VaadinIcon.PLUS.create())
                                        .add(new LeftNavigationItem("LX Data", VaadinIcon.DATABASE.create(), LxDataView.class),
                                             new LeftNavigationItem("LX Curve", VaadinIcon.LINE_CHART.create(), LxCurveView.class),
                                             new LeftNavigationItem("RSQ Data", VaadinIcon.DATABASE.create(), RsqDataView.class))
                                        .build())
                        .addToSection(FOOTER, 
                                new LeftClickableItem("Logout", VaadinIcon.SIGN_OUT.create(), clickEvent -> UI.getCurrent().getPage().setLocation(SecurityConfiguration.LOGOUT))
                        )
                        .build())
                .build());       
    }

}

I tried some of the Appreciated examples, but it seems not to work with the drawer either.

Try my example: https://github.com/DanielMartensson/Test-Bench-Data