
Sometimes we want to show/hide a view to avoid cluttering the screen. Here is an example of how it can be done in Vaadin.
.sidebar {
position: fixed;
top: 0;
right: -200px;
width: 200px;
height: 100%;
background-color: #f1f1f1;
transition: 0.5s;
padding-left: 10px;
}
.show {
right: 0;
}
public HelloWorldView() {
setSizeFull();
VerticalLayout sidebar = new VerticalLayout();
sidebar.setSizeUndefined();
sidebar.addClassName("sidebar");
Button toggleButton = new Button("Click", event -> {
if (sidebar.getClassNames().contains("show")) {
sidebar.getClassNames().remove("show");
} else {
sidebar.getClassNames().add("show");
}
});
add(toggleButton, sidebar);
}

You can see here how the sideview is getting shown/hidden when user clicks on the Button