Create Sidebar or Vertical Menu in Vaadin

Question

How can I create a VerticalMenu or Sidebar in Vaadin? Is there any specific component or Have I do programatically and using CSS?

I would like to create something like Vaadin Demo:

I'm using the new Valo Theme.

Terresaterrestrial

Answer 1

well to be able to create a responsive behaviour for your application you'd have to use CSS. Like Zigac mentioned Vaadin has some styles already written for some components (such as our menu here) but you'd wanna apply more eventually...

check out the new Dashboard demo with the Valo theme and responsiveness! It's a more comprehensive example of styling components and implements the same logic as the Valo Theme Demo. You can view the source code here

Basically what it does is create a menu as a CustomComponent and a content area as a CssLayout. Whenever a component is clicked in the menu it will call the corresponding view in the content area of the MainView

For example one of the views is the DashboardView which is the first view the user sees. It's a responsive VerticalLayout with responsive compnents on it.

You can view the styling techniques (in Sass) for the different views here

Here are some code sinppets:

MainView.java

public class MainView extends HorizontalLayout {

public MainView() {
    //This is the root of teh application it
    //extends a HorizontalLayout
    setSizeFull();
    addStyleName("mainview");

    //here we add the Menu component
    addComponent(new DashboardMenu());

    //add the content area and style
    ComponentContainer content = new CssLayout();
    content.addStyleName("view-content");
    content.setSizeFull();
    addComponent(content);

    setExpandRatio(content, 1.0f);

    new DashboardNavigator(content);
}
}

DashboardMenu.java

public DashboardMenu() {
    addStyleName("valo-menu");
    setSizeUndefined();
    DashboardEventBus.register(this);

    //add components to the menu (buttons, images..etc)
    setCompositionRoot(buildContent());
}

DashboardView.java

public DashboardView() {
    addStyleName(ValoTheme.PANEL_BORDERLESS);
    setSizeFull();
    DashboardEventBus.register(this);

    root = new VerticalLayout();
    root.setSizeFull();
    root.setMargin(true);
    root.addStyleName("dashboard-view");
    setContent(root);

    //this allows you to use responsive styles
    //on the root element
    Responsive.makeResponsive(root);

    //build your dashboard view
    root.addComponent(buildHeader());

    root.addComponent(buildSparklines());

    Component content = buildContent();
    root.addComponent(content);

    //set the content area position on screen
    root.setExpandRatio(content, 1);
...

and here is the styleName "dashboard-view" in the style sheet

dashboardview.scss

@mixin dashboard-dashboard-view {

.dashboard-view.dashboard-view {
//Styles for all devices
padding: $view-padding;
overflow: visible;

.sparks {
  @include valo-panel-style;
  margin-bottom: round($view-padding / 3);

  //styles for a tablet
  @include width-range($max: 680px) {
    .spark {
      width: 50%;
    }
    .spark:nth-child(2n+1) {
      border-left: none;
    }
    .spark:nth-child(n+3) {
      border-top: valo-border($strength: 0.3);
    }
  }
...

Graphite

Answer 2

For that exact design you do not need no CSS coding, all the styles are provided with compiled Valo theme. You just have to use appropriate styles on your components and layouts.

GIT links for that exact (Vaadin Demo) implementation:

ValoThemeUI.java - layouting valo-menu on page

ValoMenuLayout.java - layouting components inside valo-menu

Olympium

There seems to be a warning on github.com/vaadin/valo-demo that the example is deprecated. – Carolinecarolingian