Vaadin 14,6 AppLayout with StatusBar?

user_1384260 0
Viewed 147

I am happily using the standard Vaadin AppLayout Component as the layout starting point for my application. Now I received the requirement to add a statusbar. The statusbar must span the same width as the NavBar, so it cannot be part of the "content".

Is this at all possible with the default AppLayout?

vaadin14 statusbar layout java
1 Answers

Originally AppLayout has been purposed to take over the whole space, so it is not really meant for this use case. However I was able to tweak it to behave fit footer bar with these settings.

public class MainLayout extends VerticalLayout implements RouterLayout {
    private AppLayout appLayout = new AppLayout();
    private FlexLayout childWrapper = new FlexLayout();

    public MainLayout() {
        ... setup appLayout ...
        childWrapper.setSizeFull();
        appLayout.setContent(childWrapper);

        HorizontalLayout statusBar = new HorizontalLayout();
        statusBar.setHeight("50px");
        statusBar.setWidth("100%");
        statusBar.add(new Span("Status Bar"));
        statusBar.getElement().getStyle().set("background",
                "var(--lumo-tint-30pct)");
        appLayout.getElement().getStyle().set("width", "100%");
        appLayout.getElement().getStyle().set("height", "500px");
        add(appLayout, statusBar);
        this.expand(appLayout);
    }

    @Override
    public void showRouterLayoutContent(HasElement content) {
        childWrapper.getElement().appendChild(content.getElement());
    }

}

If you are interested in the status bar to be on top instead, just switch add(appLayout, statusBar); to add(statusBar, appLayout);

user_89621950
Related