How to make sidebar menu support that manual drag big drag small

[lorryl]

Hi,

I want to add splitter drag function in sidebar menu, how to combine the two control?

[Shalini Maragathavel]

Hi Lorryl, 

  

Greetings from Syncfusion support. 

We have validated your query. You can achieve your requirement of resizing the Sidebar by rendering the Sidebar component inside the Splitter and setting the pane size of Splitter as Sidebar’s width in the resizing event of Splitter component as demonstrated in the below code snippet, 

App.component.html 

<ejs-splitter #horizontal height='100%' (resizing)='resizing($event)' separatorSize=4 width='100%'> 

            <e-panes> 

                <e-pane class="sidebar" size='20%'> 

                    <ng-template #content> 

                        <div class="content"> 

                            <ejs-sidebar #sidebar id="sidebar-menu" class="dock-menu" #sidebarMenuInstance 

                                target='.content' width='100px' height='100px'> 

                                <p class="main-menu-header">ACTION</p> 

                                <p class="main-menu-header">Support</p> 

                                <p class="main-menu-header">Tour</p> 

                                <p class="main-menu-header">Search</p> 

                                <p class="main-menu-header">Items</p> 

  

                            </ejs-sidebar> 

                        </div> 

                    </ng-template> 

                </e-pane> 

                <e-pane size='50%' min='60px'> 

                    <ng-template #content> 

                        <div class="content"> 

                                    <h1 style="display:none">Sidebar</h1> 

                    </ng-template> 

                </e-pane> 

            </e-panes> 

        </ejs-splitter> 

   ---------------------------------------------------------------------- 

App.component.ts 

export class AppComponent { 

  resizing(args) { 

    this.sidebar.width = args.paneSize[0] + 'px'; 

    this.sidebar.refresh(); 

  } 

} 

Please find the below samplefor your reference. 

Sample: https://stackblitz.com/edit/angular-h5au6a-kzplld?file=app.component.html

Please, refer to the below links to know more about Sidebar and Splitter component.  

  

Sidebar- https://ej2.syncfusion.com/angular/documentation/sidebar/getting-started/

Splitter-  https://ej2.syncfusion.com/angular/documentation/splitter/getting-started/ 

  

Demo Link- https://ej2.syncfusion.com/angular/demos/#/material/sidebar/default

API Link : https://ej2.syncfusion.com/angular/documentation/api/splitter/#resizing 

  

Please get back to us, if you need further assistance.

Regards, 

Shalini M.