sidebar on mobile phone

[Sarah]

Hi,

In the sidebar, when we open the website on the mobile phone, the sidebar is hidden by default, and this is true. But when the user clicks on the menu icon and the sidebar is displayed and the user clicks on one of the sidebar items, the sidebar is not hidden automatically. It seems that in this case the sidebar should be hidden.

Thank you

[Prasanth Madhaiyan]

Hi Sarah,

Greetings from Syncfusion support.

We have validated your reported query in the Blazor Sidebar component. You can achieve your requirement by setting the resolution value using the MediaQuery property. The Sidebar component will render in an open state when the provided resolution is met. Check the samples and the video recording for your reference.

Refer to the below code snippet.

[Index.razor]

 

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

    </SfSidebar>

Sample link : https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorSideBar880277397.zip

Video link  : https://www.syncfusion.com/downloads/support/directtrac/general/ze/SidebarVideoFile2031680167.zip

While clicking on the items within the Sidebar, we were not able to reproduce the reported issue at our end. Please check our shared sample. If the issue persists, then share with us the specific device-related details to reproduce the issue. These details would help us assist you promptly.

Please let us know if you need any further assistance.

Regards,

Prasanth.

[Sarah]

Hi Prasanth Madhaiyan,

By clicking on each sidebar item, I will display one of the site pages. When we open the site on mobile. In the default sidebar, the blazer closes after clicking on each sidebar item (as shown below). If we use the syncfusion sidebar instead of the default sidebar. Clicking on each item will not close the sidebar and part of the page will be placed under the sycfusion sidebar.

thank you

[Prasanth Madhaiyan]

Hi Sarah,

To achieve your requirement, you need to place the Sidebar on the MainLayout page. For your reference, we have performed page navigation by using Sidebar with TreeView. You need to render the @Body as the main-content of the Sidebar in the MainLayout.razor page of your application.  

Refer to the below code snippet.  

[MainLayout.razor ]

 

<SfSidebar  HtmlAttributes="@HtmlAttribute" Target=".e-main-content" Width="290px"  MediaQuery="(min-width:600px)" @bind-Is-open="Sidebar Toggle">  

        <ChildContent>  

        </ChildContent>  

    </SfSidebar>   

<div class="main-content" id="maintext">  

        <div class="content">  

            @Body  

        </div>  

In the TreeView component, we have provided a NavigateUrl property. By using this property, you can navigate to other pages.

Refer to the below code snippet. 

[MainLayout.razor ]

 

<SfTreeView CssClass="main-treeview" ExpandOn="@Expand" TValue="TreeData"> 

                        <TreeViewFieldsSettings Id="NodeId" NavigateUrl="NavigateUrl" Text="NodeText" IconCss="iconCss"  DataSource="Treedata" HasChildren="HasChild"  ParentID="Pid"> 

                        </TreeViewFieldsSettings> 

                    </SfTreeView>  protected override void OnInitialized() {  

        base.OnInitialized();  

        Treedata.Add(new TreeData { NodeId = "01", NodeText = "Installation",IconCss = "icon-microchip icon" ,NavigateUrl ="/"});  

        Treedata.Add(new TreeData { NodeId = "02", NodeText = "Deployment",IconCss = "icon-thumbs-up-alt icon", NavigateUrl="/counter"});  

        Treedata.Add(new TreeData { NodeId = "03", NodeText = "Quick Start",IconCss = "icon-docs icon" , NavigateUrl="/fetchData"});  

        

}  

For your reference, we have attached the sample.

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorSideBar880277397_(2)-1837430834.zip

Please let us know if you need any further assistance.

Regards,

Prasanth Madhaiyan.

[Sarah]

Hi  Prasanth Madhaiyan,

I have used NavigateUrl in the past. But this is not my problem. when The site opens on a mobile device. In the first step, the user clicks on the SfTreeView item. In the second step, a new Page is displayed and I want to hide the SideBar at the same time (only when the website is opened on the mobile device).

thank you

[Prasanth Madhaiyan]

Hi Sarah,

We have validated your reported issue and prepared the sample to meet your requirement. On mobile devices, you can hide the Sidebar when selecting a node in TreeView using the NodeSelecting event. In this event, we have called the IsDevice function to check whether the current device is a mobile device. You can achieve this by adding the following code snippet.  

Refer the below code snippet.

[ _Host.cshtml]

 

<body>

…

<script>

        function isDevice() {

            return /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini|mobile/i.test(navigator.userAgent);

        }

</script>

…

</body>

 

[MainLayout.razor]

 

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

…

 

<SfTreeView CssClass="main-treeview" ExpandOn="@Expand" TValue="TreeData">

      <TreeViewEvents TValue="TreeData" NodeSelecting="nodeSelecting"></TreeViewEvents>                     

</SfTreeView>   

 

…               

     

</SfSidebar>                       

@code {

    private string isDevice { get; set; }

    private bool mobile { get; set; }

    public async Task nodeSelecting(NodeSelectEventArgs args)

    {

        mobile = await jsRuntime.InvokeAsync<bool>("isDevice");

        isDevice = mobile ? "Mobile" : "Desktop";

        if (isDevice == "Mobile")

        {

            Sidebar.Hide();

        }

    }

}

For your reference, we have attached the sample.

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorSideBar1-957504721.zip

Please let us know if you need any further assistance.

Regards,

Prasanth Madhaiyan.

[Sarah]

Hi , 

Thank you very much. The bug was fixed. In the sidebar component, when the user clicks the left mouse button on the content, dragging to the left. The sidebar is then hidden. Is it possible to disable this feature?

[Prasanth Madhaiyan]

Hi Sarah,

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

 

[MainLayout.razor]

 

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

 

</SfSidebar>

For your reference, we have attached the sample.

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorSideBar12-424393341.zip

Please let us know if you need any further assistance.

Regards,

Prasanth Madhaiyan.

[Sarah]

Hi,

The bug was fixed.

thank you

[Indhumathy Loganathan]

Hi Sarah,

We are glad that the provided solution was helpful for you. Please let us know if you need any further assistance.

Regards,

Indhumathy L

[Sarah]

Hi,

By default, we set the width of the sidebar in the source code. Is it possible for the user to change the width of the sidebar during execution?

thank you

[Prasanth Madhaiyan]

Hi Sarah,

We have validated your reported query in the Blazor Sidebar component by preparing the sample. We understand that you want to change the width dynamically in the Sidebar component. We have set the Sidebar width dynamically on a button click using the Width property, and you can add the below code snippet to your sample to achieve your requirement.

[MainLayout.razor]

 

<SfButton OnClick="click">Change</SfButton>

 

<SfSidebar @ref="sidebar" Width="@Width" Type="SidebarType.Auto" HtmlAttributes="@HtmlAttribute" Target=".e-main-content" MediaQuery="(min-width:600px)" @bind-IsOpen="SidebarToggle">

…

</SfSidebar>

 

public string Width = "200px";

public void click()

{

    Width = "250px";

    sidebar.Hide();

    sidebar.Show();

}

 

For your reference, we have attached the sample.

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/Blazor396862196.zip

Please check the shared sample and let us know if you need any further assistance.

Regards,

Prasanth Madhaiyan.

[Sarah]

Hi Prasanth Madhaiyan,

Is it possible for the user to do this? For example, by dragging the mouse to increase and decrease the width of the sidebar?

thank you

[Prasanth Madhaiyan]

Hi Sarah,

We have validated your reported query in the Blazor Sidebar component. We understand that you want to increase and decrease the Sidebar component width by using the mouse drag, but we don’t have direct support to meet your requirements in the Sidebar component. But we have support similar to your requirement, which is the Blazor Splitter component. Is this okay for you to use the Splitter component at your end, or do you need the same requirement in the Sidebar component? For your reference, we have shared Splitter component related details.

Documentation : https://blazor.syncfusion.com/documentation/splitter/getting-started

Demo : https://blazor.syncfusion.com/demos/splitter/default-functionalities?theme=fluent

Please share the details. Based on this, we will validate this further and get back to you with the requested details.

Regards,

Prasanth Madhaiyan.

[Sarah]

Hi,

I upgraded the .NET version from 6 to 7. I upgraded the syncfusion version to 21.1.35. The following error is seen.

[Prasanth Madhaiyan]

Hi Sarah, we have validated your requirement in the Blazor Sidebar component by preparing a sample. We understand that you are facing an issue regarding the Sidebar component's Hide method. Instead of using the Hide method, you can achieve the exact requirement by using the IsOpen property. Please refer to the code snippet below.

[MainLayout.razor]

…

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

            <ChildContent>

                <div class="main-menu">

                    <div class="table-content">

                        <SfTextBox Placeholder="Search..."></SfTextBox>

                        <p class="main-menu-header">TABLE OF CONTENTS</p>

                    </div>

                    <div>

                        <SfTreeView CssClass="main-treeview" ExpandOn="@Expand" TValue="TreeData">

                            <TreeViewFieldsSettings Id="NodeId" NavigateUrl="NavigateUrl" Text="NodeText" IconCss="IconCss" DataSource="Treedata" HasChildren="HasChild" ParentID="Pid">

                            </TreeViewFieldsSettings>

                            <TreeViewEvents TValue="TreeData" NodeSelecting="nodeSelecting"></TreeViewEvents>

                        </SfTreeView>

                    </div>

                </div>

            </ChildContent>

</SfSidebar>

…

 

@code {

    …

    // Specify the value of Sidebar component state. It indicates whether the sidebar component is in an open/close state.

    public bool SidebarToggle = false;

    …

    public async Task nodeSelecting(NodeSelectEventArgs args)

    {

        mobile = await jsRuntime.InvokeAsync<bool>("isDevice");

        isDevice = mobile ? "Mobile" : "Desktop";

        if (isDevice == "Mobile")

        {

            SidebarToggle = false;

        }

    }

}

 

 

For your reference, we have attached the sample. Please check out the attached sample and let us know if you need any further assistance.

Regards,

Prasanth Madhaiyan.

Attachment: SidebarSample_1400d3ef.zip

[Sarah]

Hello

The problem was solved.

Thanks

[Indhumathy Loganathan]

Sarah, We are glad that your reported query has been resolved. Please get back to us if you need any further assistance.