I don’t quite get navigation in the new AppLayout. In Flow 13 I would add a MenuItem associated with a route-name, and voila, I’d have navigation from the nav-bar/tab-bar to components annotated with the corresponding routes:
...
AppLayoutMenu menu = createMenu();
@PostConstruct
public void init() {
menu.addMenuItems(
new AppLayoutMenuItem(VaadinIcon.USER.create(), "My Profile", "profile"),
new AppLayoutMenuItem(VaadinIcon.TRENDING_UP.create(), "Trending Topics", "trends"),
...
In version 14, routing via url works as it should. But looking at the demo-snippets in https://github.com/vaadin/vaadin-app-layout-flow/ I don’t quite understand how to get the navigation items to actually navigate:
@Viewport("width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes, viewport-fit=cover")
@PWA(name = "My Application", shortName = "My App")
class MainAppView extends AppLayout {
public MainAppView() {
Image img = new Image("https://i.imgur.com/GPpnszs.png", "Vaadin Logo");
img.setHeight("44px");
addToNavbar(new DrawerToggle(), img);
Tabs tabs = new Tabs(new Tab("Home"), new Tab("About"));
tabs.setOrientation(Tabs.Orientation.VERTICAL);
addToDrawer(tabs);
}
}
I get nice items in the drawer or in the navbar if the tabs are added there, but they’re not bound to any route, how do I do that?
This is surely not how to do it, but it kind-of illustrates what I want (except route and label shouldn’t have to be equal, ofcourse):
tabs.addSelectedChangeListener(l -> UI.getCurrent().navigate(tabs.getSelectedTab().getLabel()));