AppLayout NavBar Tabs centralized

Flow
1

Hi @Vaadin support community,

I have moved to Vaadin 14 now and one component drives me crazy at the moment:
On the examples for the AppLayout you can see the Tabs centralized in the Navigation Bar.
https://vaadin.com/static/content/view/components/overviews/app-layout2.png

Thats exactly what I want to achive.

		setPrimarySection(Section.NAVBAR);
		Image img = new Image("https://i.imgur.com/GPpnszs.png", "Vaadin Logo");
        img.setHeight("44px");
        Tabs tabs = new Tabs(new Tab("Home"), new Tab("About"));
        tabs.setOrientation(Tabs.Orientation.HORIZONTAL);
        addToNavbar(img, tabs);

I have uploaded a screenshot where you can see, that the Tabs are always next to the image and not centralized.
I tried using a HorizontalLayout and VerticalLayout in combination, but never found a good way for it.

My achivement is, left logo, centralized Tabs, right logout button.

Am I missing something in the API or is this simply not possible without css (which I do not want to use)?

17926442.png

2

If someoe has the same problem I found my solution via

https://vaadin.com/forum/thread/17833170/applayout-alignment

tabs.getStyle().set(“margin-left”, “2em”);

Can be closed (Would still be better if this would be better documented and easier described :slight_smile:

3

i added my solution to the linked thread:
https://vaadin.com/forum/thread/17833170/17927155