Sidebar dock with drawer

[Praveen Kumar Padma]

Hi there, I have a requirement where i am looking to build sidebar dock with drawer, for example let's say dock consists of few icons and by clicking on them should open the drawer with collapsible menu.

template - 

<ejs-sidebar #dockBar id="dockSidebar" [dockSize]='dockSize'>

<div class="dock">

<ul>

<li class="sidebar-item">

<i class="icon-search-outline"></i>

<p class="e-text" title="menu">Search</p>

</li>

<li class="sidebar-item">

<i class="icon-search-outline"></i>

<p class="e-text" title="home">Home</p>

</li>

<li class="sidebar-item">

<i class="icon-search-outline"></i>

<p class="e-text" title="profile">Profile</p>

</li>

<li class="sidebar-item">

<i class="icon-search-outline"></i>

<p class="e-text" title="info">Info</p>

</li>

<li class="sidebar-item">

<i class="icon-search-outline"></i>

<p class="e-text" title="settings">Settings</p>

</li>

</ul>

</div>

</ejs-sidebar>

from the above template how to open a drawer with collapsible menu in it?

[Praveen Kumar Padma]

something like this but Angular way - https://stackblitz.com/edit/rq6pkx-pevqwn?file=index.js

[Sivakumar ShunmugaSundaram]

Hi Praveen,

Greetings from Syncfusion support.

As per the shared details, we understand that you want to implement the Angular Dock sidebar as in the shared sample. We have prepared a simple sample which contains two Sidebar, one with dock support and the other is the default Sidebar to achieve your exact requirement. We have attached the prepared sample and documentation links for your reference.

Sample: https://stackblitz.com/edit/angular-ahx1q5?file=app.component.ts

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

API: https://ej2.syncfusion.com/angular/documentation/api/sidebar/

Please check the attached sample and get back to us if  you need any further assistance.

Regards,

Sivakumar S