How define the target where to show the view

Flow
1

I have the following navigation:

@Route(value = "MasterDetail", layout = MainLayout.class)
@ParentLayout(MainLayout.class)
public class MasterDetail extends VerticalLayout implements RouterLayout {

	private static final long serialVersionUID = 1L;
	private LeftMenu leftMenu;

	public MasterDetail() {
		setSizeFull();
		setClassName("main-layout-left");

		leftMenu = new LeftMenu();
		leftMenu.addView(TitleView.class, TitleView.VIEW_NAME, VaadinIcon.ELLIPSIS_V.create());
		leftMenu.addView(CountryView.class, CountryView.VIEW_NAME, VaadinIcon.LOCATION_ARROW.create());
		leftMenu.addView(Language.class, Language.VIEW_NAME, VaadinIcon.LOCATION_ARROW.create());

		add(leftMenu);
	}
}

public class LeftMenu extends FlexLayout {
	private Tabs tabs;

	public LeftMenu() {
		setClassName("main-layout__left-nav");
		tabs = new Tabs();
		tabs.setOrientation(Tabs.Orientation.VERTICAL);
		setFlexGrow(1, tabs);
		add(tabs);
	}

	public void addView(Class<? extends Component> viewClass, String caption, Icon icon) {
		Tab tab = new Tab();
		RouterLink routerLink = new RouterLink(null, viewClass);
		routerLink.setClassName("main-layout__left-nav-item");
		routerLink.add(icon);
		routerLink.add(new Span(" "));
		routerLink.add(new Span(caption));
		tab.add(routerLink);
		tabs.add(tab);
	}
}

@Route(value = "Title", layout = MasterDetail.class)
@PageTitle("Title")
public class TitleView extends HorizontalLayout {
	public static final String VIEW_NAME = "Title";

    public TitleView() {
    	Label label = new Label("Title, das ist der Text zum anzeigen, danach kommt ein Logo");
        add(label);
        add(VaadinIcon.INFO_CIRCLE.create());

        setSizeFull();
        setJustifyContentMode(JustifyContentMode.CENTER);
        setAlignItems(Alignment.CENTER);
    }
}

the CSS is

        .main-layout__left-nav {
            display: flex;
            flex: 1;
            justify-content: center;
        }
        
        .main-layout__left-nav-item {
            display: inline-flex;
            flex-direction: row;
            align-items: center;
            padding: 4px 8px;
            cursor: pointer;
            transition: 0.3s color, 0.3s transform;
            will-change: transform;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            font-size: var(--lumo-font-size-s);
            color: var(--lumo-secondary-text-color);
            font-weight: 500;
            line-height: 1.3;
            white-space: pre;
        }

The problem is that the TitleView is shown on the bottom of the MasterDetail.

How can i define in MasterDetail where to render/show TitleView?

2

MasterDetail is a VerticalLayout, which means that every component is placed on top of each other. The first component would be the menu and the second one is the view you’re navigating into. Try switching MasterDetail to a HorizontalLayout instead.

If you want more fine-grained control over what happens on navigation, you can override the following method from RouterLayout:

    getElement().appendChild(content.getElement());
}

-Olli