Sidebar using simple CSS properties

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);
    }