Sliding side menu component

Hello,
I want to add a sliding side menu on the first page, like javascript:


http://www.jqueryscript.net/menu/Sliding-Side-Menu-Panel-with-jQuery-Bootstrap-BootSideMenu.html

how can i do it, is there any component like Accordion that can realize this function?

Thanks.

This is something you have to implement yourself. But using CssLayout and CSS Transitions this is really easy. Or you can make a JSComponent or JSExtension with the library you linked in your post. It is described in the book how to do this and there is a wiki entry on this topic too.

…or you wait 1-2 weeks, i already created this kind of component and want to release it as an extension, i just don’t have time atm to finish it…

Pierre0303-

Give this addon a try
link

I never used it but it may be what you are looking for.

Regards,
Eric

Hey Pierre,

Probably a lot of ways to do this, but here’s a POC:

private static final String MENU_HIDE = "hide";
private CssLayout menu;
private Button menuToggle;

@Override
protected void init(VaadinRequest request) {
  final CssLayout layout = new CssLayout();
  layout.setSizeFull();
  setContent(layout);

  menu = new CssLayout();
  menu.setStyleName("my-menu");

  menuToggle = new Button();
  menuToggle.setIcon(FontAwesome.ARROW_RIGHT);
  menuToggle.setStyleName("my-menu-toggle " + ValoTheme.BUTTON_ICON_ONLY);
  menuToggle.addClickListener(e -> toggleMenuVisibility());
  menu.addComponent(menuToggle);

  for (int i = 0; i < 10; i++) {
    Button button = new Button("Menu item " + i);
    button.setStyleName(ValoTheme.BUTTON_BORDERLESS);
    button.setWidth("100%");
    menu.addComponent(button);
  }

  VerticalLayout vl = new VerticalLayout();
  vl.setSizeFull();
  vl.setMargin(true);
  vl.setDefaultComponentAlignment(Alignment.MIDDLE_CENTER);
  Label lbl = new Label(
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.");
  vl.addComponent(lbl);

  layout.addComponents(menu, vl);
}

private void toggleMenuVisibility() {
  if (menu.getStyleName().contains(MENU_HIDE)) {
    menuToggle.setIcon(FontAwesome.ARROW_RIGHT);
    menu.removeStyleName(MENU_HIDE);
  } else {
    menuToggle.setIcon(FontAwesome.ARROW_LEFT);
    menu.addStyleName(MENU_HIDE);
  }
}

SCSS:

$my-menu-width: 200px;
  
.my-menu {
  background-color: lightcoral;
  height: 100%;
  position: absolute;
  transition: margin 0.1s ease-in;
  width: $my-menu-width;
    
  &.hide {
    margin-left: -$my-menu-width;
  }
}
  
.my-menu-toggle {
  left: $my-menu-width;
  margin-top: round(-$v-unit-size * 0.5);
  position: absolute;
  top: 50%;
}

Thank you very much, this helps me a lot.