Other NavBar for Mobile Devices

Hey! I want to have two different NavBars for Big (Desktop) Screens and Mobile Devices.

I found this NavBar in the Vaadin Docu and i have two questions:

  1. Is there a Code example for “getNavigation()”?
  2. Is it possible to make two different types of NavBars? One when visiting the page on big screens and one for small screens?

Thanks! Maxi :smile:
image.png

  1. You can click on the expand button to see the full code example
  1. Yes, but the how depends on different in what way.

The AppLayout has that separate mobile navbar at the bottom for small viewports.

Usually you’d use CSS to make stuff like navbars render differently depending on the viewport size.

You can also use Flow’s BrowserInfo class to query the viewport size and put different things in the UI depending on that.

Thanks for you`r responses! I didnt know that. Thanks!!! :smile:

hmm, come to think of it, maybe BrowserInfo was a Vaadin 8 API. But there is something similar in Flow, I just don’t recall what the API is like. Maybe @vital-koala can remind me?

The info’s available through the retrieveExtendedClientDetails callback;

        UI.getCurrent().getPage().retrieveExtendedClientDetails((ExtendedClientDetails e) -> {
            e.getBodyClientWidth();
            e.getBodyClientHeight();
        });

Getting the ExtendedClientDetails requires a client-server roundtrip on the first call.

right, that’s it

There’s also UI.getCurrent().getSession().getBrowser().isAndroid(); and .isIPhone() that can be used to guess if it’s mobile