有大神能给左侧主菜单加个收缩功能么?

有大神能给左侧主菜单加个收缩功能么?

cuba的sampler就可以,你看能参考么?

效果就是sampler这样:https://demo.cuba-platform.com/sampler/#main

我说的是类似https://adminlte.io/themes/AdminLTE/index2.html#这种的菜单折叠功能。

描述清楚问题的关键点

折叠的目的是在手机端展示吗?看看这个:

不是为了手机端展示,只是想实现https://adminlte.io/themes/AdminLTE/index2.html这样的左侧主菜单效果,现在很多系统都是这样的,可以把菜单收缩依然可以使用。

我在主界面加了一个split想让左侧菜单可以收缩,但是显示不大正常,麻烦看看哪里设置不对?

<window xmlns="http://schemas.haulmont.com/cuba/screen/window.xsd"
        xmlns:dashboard="http://schemas.haulmont.com/cubadshb/ui-component.xsd"
        caption="mainMsg://application.caption">
    <layout expand="horizontalWrap"
            stylename="c-sidemenu-responsive"
            responsive="true">
        <hbox id="horizontalWrap"
              expand="menuSplit"
              stylename="c-sidemenu-layout"
              width="100%">
            <split id="menuSplit" dockable="true" dockMode="LEFT" orientation="horizontal">
            <cssLayout id="sideMenuPanel"
                       height="100%"
                       stylename="c-sidemenu-panel">
                <button id="mobileMenuButton"
                        caption="mainMsg://app.menu"
                        icon="icons/mobile-menu.png"
                        stylename="primary c-sidemenu-toggle"/>
                <hbox id="mobileButtonsBox"
                      stylename="c-sidemenu-mobile-buttons">
                    <newWindowButton id="mobileNewWindowButton"
                                     description="mainMsg://newWindowBtnDescription"
                                     icon="app/images/new-window.png"/>
                    <userActionsButton id="mobileLogoutButton"/>
                </hbox>
                <hbox id="appTitleBox"
                      spacing="true"
                      stylename="c-sidemenu-title"
                      width="100%">
                    <label id="appTitleLabel"
                           value="mainMsg://application.logoLabel"/>
                </hbox>
                <cssLayout id="sideMenuWrap"
                           stylename="c-sidemenu-wrap">
                    <image id="logoImage"
                           stylename="c-app-icon"
                           align="MIDDLE_CENTER"
                           scaleMode="SCALE_DOWN"/>
                    <userIndicator id="userIndicator"
                                   width="100%"/>
                    <hbox id="mainButtonsBox"
                          stylename="c-main-buttons">
                        <newWindowButton id="newWindowButton"
                                         description="mainMsg://newWindowBtnDescription"
                                         icon="app/images/new-window.png"/>
                        <userActionsButton id="logoutButton"/>
                    </hbox>
                    <timeZoneIndicator id="timeZoneIndicator"
                                       width="100%"/>
                    <sideMenu id="sideMenu"
                              sidePanel="sideMenuPanel"
                              sidePanelToggleButton="mobileMenuButton"/>
                    <ftsField id="ftsField"
                              width="100%"/>
                </cssLayout>
            </cssLayout>
            <workArea id="workArea"
                      height="100%">
                <initialLayout margin="true"
                               spacing="true">
                    <dashboard:dashboard id="dashboardId"
                                         code="demo"
                                         timerDelay="60">
                        <dashboard:parameter name="role" value="Admin" type="string"/>
                    </dashboard:dashboard>
                </initialLayout>
            </workArea>
            </split>
        </hbox>
    </layout>
</window>

界面:

已经弄好了,要设置width