We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

The sidebar moves the content but does not hide it

I want the sidebar to move the main content and when the window is on a mobile view the content should be hidden from the sidebar. As I understand it, it is automatically set as default behavior. But it does not work for me. I also tried to force it with: Type="SidebarType.Auto" but that didn't work either. The sidebar always pushes the content away. Here is my Code:

NavMenu Code

@inject MIPLATONavigationManager NavigationManager


<SfSidebar Width="260px" Type="SidebarType.Auto" Target=".maincontent" Position="SidebarPosition.Left" @bind-IsOpen="IsOpen" MediaQuery="(min-width: 800px)">

    <ChildContent>

        <SfTreeView TValue="NavigationTreeData">

            <TreeViewEvents TValue="NavigationTreeData" NodeSelecting="BeforeSelect" NodeSelected="OnSelect"></TreeViewEvents>

            <TreeViewFieldsSettings Id="Id" Text="Name" Selected="IsSelected" ParentID="ParentId" HasChildren="HasChild" Expanded="IsExpanded" DataSource="@NavTreeData"></TreeViewFieldsSettings>

        </SfTreeView>

    </ChildContent>

</SfSidebar>


@code {

    [Parameter]

    public bool IsOpen { get; set; } = true;


    public List<NavigationTreeData> NavTreeData { get; set; } = new List<NavigationTreeData>();


    public void Toggle(Syncfusion.Blazor.Navigations.ClickEventArgs args)

    {

        if (args.Item.TooltipText == "Menu")

        {

            IsOpen = !IsOpen;

        }

    }


    public void BeforeSelect(NodeSelectEventArgs args)

    {

        if (args.NodeData.HasChildren)

        {

            args.Cancel = true;

        }

    }


    public void OnSelect(NodeSelectEventArgs args)

    {

        string id = args.NodeData.Id;


        var ntd = NavTreeData.Where(i => i.Id == id).Single();


        if (!String.IsNullOrEmpty(ntd.Url))

            NavigationManager.NavigateTo(ntd.Url);


        StateHasChanged();

    }


    protected override void OnInitialized()

    {

        // TODO Navigation must reflect permission assignment

        NavTreeData.Add(new NavigationTreeData() { Id = "InfoObject", Name = "Information Objects", HasChild = false, IsExpanded = false, IsSelected = false, Url = "/InfoObject" });

        NavTreeData.Add(new NavigationTreeData() { Id = "MobileUser", Name = "Mobile Users", HasChild = false, IsExpanded = false, IsSelected = false, Url = "/MobileUser" });

        NavTreeData.Add(new NavigationTreeData() { Id = "Admin", Name = "Administration", HasChild = true, IsExpanded = false, IsSelected = false });

        NavTreeData.Add(new NavigationTreeData() { Id = "Pool", Name = "Pools", HasChild = false, IsExpanded = false, IsSelected = false, ParentId = "Admin", Url = "/Pool" });

        NavTreeData.Add(new NavigationTreeData() { Id = "FilterDefinition", Name = "Filter Definitions", HasChild = false, IsExpanded = false, IsSelected = false, ParentId = "Admin", Url = "/FilterDefinition" });

        NavTreeData.Add(new NavigationTreeData() { Id = "PropertyDefinition", Name = "Property Definitions", HasChild = false, IsExpanded = false, IsSelected = false, ParentId = "Admin", Url = "/PropertyDefinition" });

        NavTreeData.Add(new NavigationTreeData() { Id = "Category", Name = "Category", HasChild = false, IsExpanded = false, IsSelected = false, ParentId = "Admin", Url = "/Category" });

        NavTreeData.Add(new NavigationTreeData() { Id = "Language", Name = "Languages", HasChild = false, IsExpanded = false, IsSelected = false, ParentId = "Admin", Url = "/Language" });

        NavTreeData.Add(new NavigationTreeData() { Id = "UserRole", Name = "Users and Roles", HasChild = true, IsExpanded = false, IsSelected = false, ParentId = "Admin" });

        NavTreeData.Add(new NavigationTreeData() { Id = "User", Name = "User", HasChild = false, IsExpanded = false, IsSelected = false, ParentId = "UserRole", Url = "/BackendUser" });

        NavTreeData.Add(new NavigationTreeData() { Id = "Role", Name = "Role", HasChild = false, IsExpanded = false, IsSelected = false, ParentId = "UserRole", Url = "/Role" });

        NavTreeData.Add(new NavigationTreeData() { Id = "Permission", Name = "Permission", HasChild = false, IsExpanded = false, IsSelected = false, ParentId = "UserRole", Url = "/Permission" });


    }



    public class NavigationTreeData

    {

        public string Id { get; set; }

        public string ParentId { get; set; }

        public string Name { get; set; }

        public bool HasChild { get; set; }

        public bool IsExpanded { get; set; }

        public bool IsSelected { get; set; }

        public string Url { get; set; }

    }

}


MainLayout Code:


@inherits LayoutComponentBase


<PageTitle>Comneos.MIPLATO.Server.Portal</PageTitle>


        <SfToolbar CssClass="defaultToolbar">

            <ToolbarEvents Clicked="@ToolbarClicked"></ToolbarEvents>

            <ToolbarItems>

                <ToolbarItem PrefixIcon="e-icons e-menu" TooltipText="Menu"></ToolbarItem>

                <ToolbarItem>

                    <Template>

                        <div class="e-folder">

                            <div class="e-folder-name">MIPLATO</div>

                        </div>

                    </Template>

                </ToolbarItem>

                <ToolbarItem Align="@ItemAlign.Right">

                    <Template>

                        <div>

                            <LoginDisplay />

                        </div>

                    </Template>

                </ToolbarItem>

            </ToolbarItems>

        </SfToolbar>

 <NavMenu IsOpen="@NavBarIsOpen" />


    <main class="maincontent">

        <div class="content">@Body</div>

    </main>


@code {

    public bool NavBarIsOpen { get; set; } = true;


    public void ToolbarClicked(Syncfusion.Blazor.Navigations.ClickEventArgs args)

    {

        NavBarIsOpen = !NavBarIsOpen;

    }

}

Can you help me? Let me know if you need anything else


6 Replies

SA SureshRajan Alagarsamy Syncfusion Team February 23, 2023 11:42 AM UTC

Hi Artur,


Greetings from Syncfusion support.


Based on your shared details and code snippet, we understand that you are facing an issue in mobile mode with the "Auto" type property in the Sidebar component. We checked on our end, and we suggested you refresh the browser once you have switched to mobile mode. For your reference, we have attached a sample.

If refreshing the browser does not resolve the issue, please share a replicated sample or video footage of the issue with us. This will help us validate your query more efficiently and provide further assistance.


Check out the shared details and get back to us if you need any further assistance.


Regards,
Suresh.


Attachment: Sidebar_d40c20f.zip


AZ Artur Zigel March 13, 2023 03:37 PM UTC

Dear Syncfusion-Team,


Refreshing the browser works. The sidebar obscures the content. The problem I still have is that the sidebar moves the content. It should not do that in the mobile view.


Best Regards.


Artur




SA SureshRajan Alagarsamy Syncfusion Team March 15, 2023 02:53 PM UTC

Artur, We have reviewed your query and understand that you are experiencing Sidebar overlapping issue in mobile mode of the Sidebar component. We have prepared a sample for you that includes a resize invoke method to programmatically refresh the browser when you change the browser to mobile mode. This will help you to achieve your desired outcome. Refer to the below code snippet for further reference.


Code Snippet :


[MianLayout.razor]

 

@using Microsoft.JSInterop

@inject IJSRuntime JsRuntime

 

....

 

@code {

  protected override async Task OnAfterRenderAsync(bool firstRender)

  {

      if (firstRender)

      {

          // Add an event listener to the "resize" event

          await JsRuntime.InvokeVoidAsync("addEventListener", "resize", DotNetObjectReference.Create(this));

      }

  }

}

 


[_Host.cshtml]

 

<script>

  window.addEventListener('resize', function() {

    if (window.innerWidth <= 768) {

        // To refresh the browser

        location.reload();

    }

  });

</script>

 


Check out the attached sample and get back to us if you need any further assistance.


Regards,
Suresh.



Attachment: Sidebar_89d4d6d0.zip


AZ Artur Zigel March 16, 2023 11:13 AM UTC

Hello Dear Syncfusion Team,


that's a cool feature I can use but not what I meant. I'll send you a video. There you can see that in the normal view the main content is moved from the sidebar. That's fine. But it shouldn't be like that in the mobile view. The sidebar should cover the main content and not move it. Otherwise the main content is much too small. The main content should not be moved in the mobile view. This is what I want. Can you help me ?


Best regards


Artur


Attachment: Sidebar_cc57e8d2.7z


SA SureshRajan Alagarsamy Syncfusion Team March 17, 2023 06:22 AM UTC

Artur, We have achieved your exact requirement in our previous shared sample through customization. To resolve the issue, we have customized our Sidebar component by making an interop call.


We have run our previous shared sample and have attached a video reference for your reference. We suggest you try out our shared sample at your end, and if the issue persists, get back to us with a replicated sample of the issue.


Regards,
Suresh.


Attachment: SidebarMobileModeVideo_26ab18d7.zip


AZ Artur Zigel April 4, 2023 02:11 PM UTC

Dear Syncfusion-Team,


I had a css bug. I have fixed it. Now it works as it should. Thank you for your help.


Best regards

Artur


Loader.
Live Chat Icon For mobile
Up arrow icon