Hi Chris Johansson,
Greetings from Syncfusion support.
We have checked your requirement with Sidebar component. In our responsive layout sample, we have set the MediaQuery property for Sidebar component. When the window reaches the specified mediaQuery, it opens the sidebar element by default.
Please, refer the below link to know more about the MediaQuery property.
By default, sidebar type is set as Auto and so it opens on initial loading. We can prevent the sidebar component from expanding on initial loading by assigning Sidebar type property as (Push, Over, Slide).
By removing the MediaQuery property and also set the sidebar type as Push in your application , it collpase the sidebar and also resolves your reported problem.
Refer the below code for setting the sidebar type.
|
<SfSidebar HtmlAttributes="@HtmlAttribute" Width="290px" Target=".main-content" @ref="Sidebar" Type="SidebarType.Push">
<ChildContent>
<div class="main-menu">
<div class="table-content">
<input type="text" placeholder="Search..." class="search-icon">
<p class="main-menu-header">TABLE OF CONTENTS</p>
</div>
<div>
<SfTreeView CssClass="main-treeview" @ref="TreeView" ExpandOn="@Expand" TValue="TreeData">
<TreeViewFieldsSettings Id="nodeId" Text="nodeText" IconCss="iconCss" DataSource="treedata" HasChildren="hasChild" ParentID="pid">
</TreeViewFieldsSettings>
</SfTreeView>
</div>
</div>
</ChildContent>
</SfSidebar> |
Please, download the sample in following link.
Please, refer the following links to know more about the Sidebar component.
|
UG Documentation |
|
|
Demo link |
|
|
MediaQuery property |
|
|
API reference |
|
Please let us know, if you need any further assistance.
Regards,
Sowmiya.P
