Vaadin 14,6 AppLayout with StatusBar?

Question

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?

Answer 1

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