how to show 2menu left and right side simultaneously

[hina]

i wann to show one menu at left side and another is in right side.

Please provide the solution

[Aravinthan Seetharaman]

Hi Hina, 

 

Thanks for contacting Syncfusion Support. 

 

We have checked your query. We can able to achieve your requirement by rendering two MenuBar with overridden css style. Please refer the below code snippet  

 

app.component.html 

 

<div id="defaultSample" class="control-section"> 

    <div class="menu-control1"> 

        <ejs-menu [items]='menuItems'></ejs-menu> 

    </div> 

    <div class="menu-control2"> 

        <ejs-menu [items]='menuItems'></ejs-menu> 

    </div> 

</div> 

 

 

app.compoenent.css 

 

.menu-control2 { 

  position: absolute; 

  right: 10px; 

} 

.control-section { 

  display: flex; 

} 

 

 

Sample: https://stackblitz.com/edit/angular-7kzivm?file=app.component.css  

 

If we misunderstood your requirement, please share more details. So that we can work on this and provide you a better solution quickly. 

 

Regards, 

Aravinthan S 

[hina]

Thanks for your effort

actually requirement is like i want to implement 2 sidebars one is left side another is right side.

Below image is showing the left side menu only ,i want both menu(left and right) simultaneously.user can open left side bar menu or right sidebar menu or both together

[Indhumathy Loganathan]

Hi Hina, 

 

We have validated your requirement in Sidebar component. Sidebar can be initialized on right side or left side of the main content using position property. The HTML element with class name main-content will be considered as the main content and both the Sidebars will behave as side content to this main content area of a web page. Refer to the below code snippet. 

 

[app.component.html] 

 

<!-- Left sidebar element declaration --> 

<ejs-sidebar 

    id="sidebar-treeview" 

    class="dock-menu" 

    #leftSidebar 

    [width]="width" 

    [mediaQuery]="mediaQuery" 

    [target]="target" 

    [enableDock]="enableDock" 

    [dockSize]="dockSize" 

> 

    … 

</ejs-sidebar> 

<!-- end of sidebar element --> 

 

<!-- Right sidebar element declaration --> 

<ejs-sidebar 

    id="sidebar-treeview" 

    class="dock-menu" 

    #rightSidebar 

    [width]="width" 

    [mediaQuery]="mediaQuery" 

    [position]="position" 

    [target]="target" 

    [enableDock]="enableDock" 

    [dockSize]="dockSize" 

> 

    … 

</ejs-sidebar> 

<!-- end of sidebar element --> 

 

[app.component.ts] 

 

  target: string = '.main-content'; 

  public position: string = 'Right'; 

  public enableDock: boolean = true; 

  public dockSize: string = '44px'; 

 

You can find the sample demonstrating the solution from below link. 

 

https://stackblitz.com/edit/angular-multi-sidebar?file=app.component.css 

 

Also check the below document for multiple Sidebar components. 

 

https://ej2.syncfusion.com/angular/documentation/sidebar/how-to/multiple-sidebar/ 

 

https://ej2.syncfusion.com/angular/documentation/sidebar/how-to/top-and-bottom-sidebar/ 

 

Please let us know if you need any further assistance. 

 

Regards, 

Indhumathy L 

[hina]

Thanks

this is wha i m looking for,but facing one issue,if i divide the menu in 2 components like upper click button is in header componenet  and rest sidebar in another component then its not working,pls help

[Indhumathy Loganathan]

Hi Hina, 

 

We have validated your reported query. We suspect that you have been including the header block inside a component page and Sidebar in another component page and wants to open the Sidebar based on the menu(hamburger icon) click.  

 

For your reference, we have prepared a sample where we render header block in the app.component.html page and the Sidebar in child.component.html page. We perform toggle for the Sidebar based on the menu(hamburger icon) click. Check the below code snippet. 

 

  leftToggle() { 

    let left = document.getElementById('left-sidebar').ej2_instances[0]; 

    left.toggle(); 

  } 

  rightToggle() { 

    let right = document.getElementById('right-sidebar').ej2_instances[0]; 

    right.toggle(); 

  } 

 

Sample: https://stackblitz.com/edit/sidebar-with-multiple-component?file=app/app.component.ts 

 

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

 

Regards, 

Indhumathy L

[hina]

Hello Indhumathy,

Sample: https://stackblitz.com/edit/sidebar-with-multiple-component?file=app/app.component.ts 

this link you shared is not showing any menu .Please look .

[Indhumathy Loganathan]

Hi Hina, 

 

Sorry for the inconvenience. 

 

We have validated your reported query and modified the CDN links to resolve the reported issue. You can find the sample from below link. 

 

https://stackblitz.com/edit/sidebar-with-multiple-component-rx33mn?file=index.html 

 

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

 

Regards, 

Indhumathy L