I am trying to replicate the Vaadin Valo theme demo layout - menu on the left, content on the right. I've used the source code for this demo as a starting point, pruning out except the UI class (ValoThemeUI), ValoMenuLayout and the Tables layout, and everything looks as expected, however my version doesn't dynamically resize/hide the right hand side menu when I resize my browser window like the official demo does.
I figure I'm missing something, but looking at the demo source code, I can't see what. There has to be some scss code somewhere that defines the menu width/resize behaviour - but I can't find it.
One thing I did have to add/do differently was add the following code to ValoThemeUI, as otherwise the app doesn't run. The demo must be doing this (and maybe other key things?) elsewhere, but I can't figure out where.
@WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true)
@VaadinServletConfiguration(ui = ValoThemeUI.class, productionMode = false)
public static class MyUIServlet extends VaadinServlet {
}
Ok, so I've answered my own question by trawling through the valo source code.
The source code for the demo, as linked, doesn't do the menu hiding/resizing shown in the live demo (also linked), but getting it to work is fairly simple (once you know how). You just need to add
addStyleName(ValoTheme.UI_WITH_MENU);
after
Responsive.makeResponsive(this);
in the init() method of ValoThemeUI.