Disable menu expand/collapse on swipe

[ROBERTO REALE]

In my app I use a vertical menu:

<SfMenu CssClass="dock-menu" TValue="MenuItem" Orientation="Orientation.Vertical">

    <MenuEvents ItemSelected="SelMenu" TValue="MenuItem"></MenuEvents>
    <MenuItems>
        <MenuItem Id="main-home" Text="Home" class="menu-separator-bottom" IconCss="fas fa-home icon"></MenuItem>
        <AuthorizeView>
            <Authorized>
                <MenuItem Id="main-xxxx" Text="XXXXX" IconCss="fas fa-list-ul icon"></MenuItem>
                @* ... *@
</Authorized>
</AuthorizeView>
</MenuItems>
</SfMenu>

Each time I swipe with the mouse on the page (both on menu and content areas) my menu gets collapsed/expanded, depending on the swipe direction.

I would like to completely disable this behaviour on every platform, leaving only the "≡" icon on top to expand/collapse.

This is what happens now:

[YuvanShankar Arunagiri]

Hi Roberto,

We have validated your requirement in the Blazor Sidebar component. By default, the Sidebar EnableGeustures property is in true state which will expand or collapse the Sidebar while mouse swiping. You can prevent this by setting EnableGestures value as false. Please check the below code snippet.

[MainLayout.razor]

 

<SfSidebar HtmlAttributes="@HtmlAttribute" EnableGestures="false"  Width="290px" Target=".e-main-content" MediaQuery="(min-width:600px)" @bind-IsOpen="SidebarToggle" >

</SfSidebar>

Please try the above suggestion and let us know if you need any further assistance.

Regards,

YuvanShankar A

[ROBERTO REALE]

Hi,

as you can see in the code I posted I use SfMenu, not SfSidebar.

SfMenu doesn't seem to have an EnableGestures​ property.

I tried to enclose SfMenu within a SfSidebar with EnableGestures=false but gestures are still active.

Regards,

Roberto

[YuvanShankar Arunagiri]

Hi Roberto,

We have validated your reported query and menu component standalone can’t achieve your requirement expand/collapses. Sfmenu within sidebar only can achieve your requirement. we have prepared the sample based on your requirement. please refer the below code snippet and sample link.

<SfSidebar HtmlAttributes="@HtmlAttribute" Target=".main-content" Width="220px" DockSize="50px" EnableDock="true" @bind-IsOpen="SidebarToggle" Type="@SidebarType.Auto" EnableGestures="false">

        <ChildContent>

            <div class="main-menu">

                <div>

                    <SfMenu CssClass="dock-menu" Items="@MainMenuItems" Orientation="@VerOrientation"></SfMenu>

                </div>

            </div>

        </ChildContent>

    </SfSidebar>

Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorApp-127316105

Could you please check the above code and get back to us, if you need any further assistance on this.

Regards, 

YuvanShankar A