Collapsible Menu Side

General
1

Hi.
I need to do a collapsible menu for my page.

Like this.

I would start by creating that sort of collapsible container component as an independent custom component. Something like this:
CssLayout (collapsible container)
Button (“Dashboard”) – clicking this toggles the visibility of the following CssLayout
CssLayout (sub-items)
Button (“Dashboard v.1”)
Button (“Dashboard v.2”)
Button (“Dashboard v.3”)
Button (“Dashboard v.4”)

Then place multiple of those in the sidebar menu.

Can anyone help me to do the css ?

2

I did it using a tree.

public Menu() {
        this.navigator = MainUI.get().getNavigator();
        setPrimaryStyleName(ValoTheme.MENU_ROOT);
        menuPart = new CssLayout();
        menuPart.addStyleName(ValoTheme.MENU_PART);

        menuPart.addComponent(buildTitle());
        
        // button for toggling the visibility of the menu when on a small screen
        final Button showMenu = new Button("Menu", new ClickListener() {
            private static final long serialVersionUID = 1L;

            @Override
            public void buttonClick(final ClickEvent event) {
                if (menuPart.getStyleName().contains(VALO_MENU_VISIBLE)) {
                    menuPart.removeStyleName(VALO_MENU_VISIBLE);
                } else {
                    menuPart.addStyleName(VALO_MENU_VISIBLE);
                }
            }
        });
        showMenu.addStyleName(ValoTheme.BUTTON_PRIMARY);
        showMenu.addStyleName(ValoTheme.BUTTON_SMALL);
        showMenu.addStyleName(VALO_MENU_TOGGLE);
        showMenu.setIcon(FontAwesome.NAVICON);
        menuPart.addComponent(showMenu);

        // container for the navigation buttons, which are added by addView()
        menuItemsLayout = new CssLayout();
        menuItemsLayout.setPrimaryStyleName(VALO_MENUITEMS);
        tabs = new ArrayList<>();
        
        tree = new Tree();
        tree.addStyleName("tree"); // cursor: pointer
        tree.addItemClickListener(event -> {
            if(!tabs.contains(event.getItemId().toString())){
                navigator.navigateTo(event.getItemId().toString());
            }else{
                if(tree.isExpanded(event.getItemId().toString())){
                    tree.collapseItem(event.getItemId().toString());
                }else{
                    tree.expandItem(event.getItemId().toString());
                }
            }
        });

        menuPart.addComponent(buildUserMenu());
        
        menuItemsLayout.addComponent(tree);
        menuPart.addComponent(menuItemsLayout);
        
        addComponent(menuPart);
        Responsive.makeResponsive(tree);
    }
    
    private Component buildTitle(){
         String version = "v-" + ConfigProperties.getInstance().getVersion();
         String titleString = "title" + version;
         Label title = new Label("<center><strong>" + titleString + "</strong></center>", ContentMode.HTML);
         title.setSizeUndefined();
         HorizontalLayout logoWrapper = new HorizontalLayout(title);
         logoWrapper.setComponentAlignment(title, Alignment.MIDDLE_CENTER);
         logoWrapper.addStyleName(ValoTheme.MENU_TITLE);
         return logoWrapper;
    }
    
    public void addTab(String name, Resource icon){
        tabs.add(name);
        tree.addItem(name);
        tree.setItemIcon(name, icon);
    }

    public void addView(String from, View view, final String name, String caption,
            Resource icon) {
        navigator.addView(name, view);
        createViewButton(from, name, caption, icon);
    }

    public void addView(String tab, Class<? extends View> viewClass, final String name,
            String caption, Resource icon) {
        navigator.addView(name, viewClass);
        createViewButton(tab, name, caption, icon);
    }

    private void createViewButton(String tab, final String name, String caption,
            Resource icon) {
        if(!tabs.contains(tab)){
            tabs.add(tab);
            tree.addItem(tab);
        }
        tree.addItem(name);
        tree.setChildrenAllowed(name, false);
        if(icon != null) tree.setItemIcon(name, icon);
        tree.setParent(name, tab);
    }