Responsive Design - Burger Menu not shown

Flow
1

Hello,

I’m using the SideMenu-Addon for Navigation. I’ve got demo app working and added a view. The Sidemenu should be responsive like in the Bakery-App. As far as i know, it should be responsive by default. However, if I resize my website via F12+Google Device Toolbar the side-menu does not change to the burger-menu (options menu), the layout remains.

Sometimes it seems like that the burger-menu is quickly rendered but than replaced with the normal layout of SideMenu.

Any help to fix this?

2

Hi,

does this also happen when you reload the page with the mobile-sized view enabled? Depending on the implementation, it might be that the responsiveness is only dealt with during initialization (which is usually enough for real world use cases).

-Olli

3

Hello Olli,

yes it is not working for mobile view aswell.

@Theme("mytheme")
public class MainUI extends UI {

    // View names
    static final String MANDANTENDETAILVIEW = "mandantenDetailView";
    static final String STARTVIEW = "";

    private SideMenu sideMenu = new SideMenu();
    private ThemeResource logo = new ThemeResource("images/logo_simba_portalserver.png");

    Navigator navigator;

    @Override
    protected void init(VaadinRequest vaadinRequest) {
        setContent(sideMenu);

        navigator = new Navigator(this, sideMenu);
        setNavigator(navigator);

        // Create and register the views
        navigator.addView(STARTVIEW, new StartView());
        navigator.addView(MANDANTENDETAILVIEW, new MandantenDetailView());

        // Set initial view
        navigator.navigateTo(STARTVIEW);

        sideMenu.setMenuCaption("SIMBA SOFTWARE", logo);

        // Navigation examples
        sideMenu.addNavigation("Start", STARTVIEW);
        sideMenu.addNavigation("SIMBA WEB APP", MANDANTENDETAILVIEW);
    }



    @WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true)
    @VaadinServletConfiguration(ui = MainUI.class, productionMode = false)
    public static class MyUIServlet extends VaadinServlet {
    }

}

This is my sourcecode so far. The views are designed by Vaadin Designer, following this guide
Adding a view - Vaadin Bakery
. However I’m currently not working with @SpringView or @CDIView.

4

It’s hard to say what is happening based on the Java code alone. The Designs and your theme also affect things. I think you’ll need to read up on Responsive Theming: https://vaadin.com/docs/framework/themes/themes-responsive.html

That should get you started on responsive design, at least.

-Olli

5

Thanks for the quick response. I’ll try to find out whats happening and post my answer afterwards.

6

Ok finally I’ve found out why it has not worked. The design is not working for mobile but only for desktop mode.