Accessing to navbar in vaadin 14

I'm using vaadin 14 for my application. My MainView class extends Applayout class. This allows me to use addToNavBar(true, some Components) function which adds navigation bar to your application.

Now, In my main view, inside the navigation bar, I have register and login buttons populated. If click on these buttons, using addonclick listener I delegate to other views like Login and Registration. During these view changes, the navbar on top still stays there. However, if the user logged in or registered, I want to remove these login and register buttons in navigation bar and replace them with profile picture icon located inside the navbar. However, from child views(register,login) I couldn't find a way to access to navbar with vaadin 14. Accordingly, how can I access and change the content of the navbar from child views?

public class MainView extends AppLayout {
private static final long serialVersionUID = 1L;
private final Tabs menu;
private HorizontalLayout headerLayout;

public MainView() {
    setPrimarySection(Section.NAVBAR);
    headerLayout = createHeaderContent();
    addToNavbar(true, headerLayout);
    setDrawerOpened(false);
    menu = createMenu();
    addToDrawer(createDrawerContent(menu));
}

private HorizontalLayout createHeaderContent() {
    headerLayout = new HorizontalLayout();
    headerLayout.setId("header");
    headerLayout.getThemeList().set("dark", true);
    headerLayout.setWidthFull();
    headerLayout.setSpacing(false);
    headerLayout.setAlignItems(FlexComponent.Alignment.CENTER);
    headerLayout.add(new DrawerToggle());
    headerLayout.add(createWebsiteName());
    headerLayout.add(createMiddleSpacingInHeader());
    headerLayout.add(createLoginAndRegisterButtons());

    return headerLayout;
}

private Component createLoginAndRegisterButtons() {
        HorizontalLayout layout = new HorizontalLayout();
        layout.setPadding(true);
        layout.setSpacing(true);
        layout.setAlignItems(Alignment.STRETCH);

        Button register = createRegisterButton();
        Button login = createLoginButton();
        Image loggedInUserPicture = createLoggedInUserImage();

        layout.add(register, login, loggedInUserPicture);

        return layout;
    }

Solution

There is currently no good API for this. One reason is that framework needs to be agnostic to how you build your menu. I have solved this by creating small interface of this kind

public interface HasTabsAccessor {
    
    public default Tabs getTabs(Component component) {
        Optional<Component> parent = component.getParent();
        Tabs menu = null;
        while (parent.isPresent()) { 
            Component p = parent.get();
            if (p instanceof MainLayout) {
                MainLayout main = (MainLayout) p;
                menu = main.getMenu();
            }           
            parent = p.getParent();
        }
        return menu;
    }
}

Which I can then add to views where I need to access the menu.

    @Route(value = FormLayoutView.ROUTE, layout = MainLayout.class)
    @PageTitle(FormLayoutView.TITLE)
    public class FormLayoutView extends VerticalLayout implements BeforeLeaveObserver, HasTabsAccessor {
...

And then just using getTabs() in the view.