如何在vaadin 10中左侧创建垂直菜单栏，右侧显示内容

import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.router.Route;

@Route("")
public class MainView extends Div {

    public MainView() {
        // 创建一个垂直布局
        VerticalLayout layout = new VerticalLayout();

        // 创建菜单栏按钮
        Button menuButton1 = new Button("菜单项1");
        Button menuButton2 = new Button("菜单项2");
        Button menuButton3 = new Button("菜单项3");

        // 添加菜单栏按钮到布局中
        layout.add(menuButton1, menuButton2, menuButton3);

        // 创建内容显示区域
        Div content = new Div();
        content.setText("这里是右侧内容");

        // 设置布局的宽度和高度
        layout.setWidth("200px");
        layout.setHeight("100%");

        // 设置内容显示区域的宽度和高度
        content.setWidth("100%");
        content.setHeight("100%");

        // 将内容显示区域添加到布局中
        layout.add(content);

        // 将布局添加到主视图中
        add(layout);
    }
}