How to build Drawer component

Question

Hi Syncfusion Team,I need to build a Drawer component, I checked the list of available components of Syncfusion but didn't find it.Link example: https://react-meqfb9.stackblitz.io/ Do you have this component available? If not, is there a way to build such a component?Regards,Hung

Indhumathy Loganathan · Accepted Answer

Hi Ton,Greetings
from Syncfusion support.We have a Sidebar
component within Syncfusion components which is suitable for your requirement.
For your reference, we have prepared a sample to meet your exact scenario. You
can find the sample at the below link.https://stackblitz.com/edit/react-29ehsf?file=index.js,index.css,package.jsonYou can
refer to the below links to know more about the Sidebar component.Documentation:
https://ej2.syncfusion.com/react/documentation/sidebar/getting-started/Demo: https://ej2.syncfusion.com/react/demos/#/bootstrap5/sidebar/defaultAPI
Reference: https://ej2.syncfusion.com/react/documentation/api/sidebar/Please check
the shared details and get back to us if you need any further assistance.Regards,Indhumathy
L

Ton That Hung · Answer

That's great, but when I initialize the Sidebar inside another HTML element, the overlay doesn't look good. I still can click on the element below the overlay.

Link example: https://stackblitz.com/edit/react-29ehsf-d3cpck?file=index.js,index.css,package.json

Indhumathy Loganathan · Answer

Hi Ton,We have validated your
query and considered this as a bug at our end. The fix for this issue will be included
in our weekly patch release on June 21, 2022. You can track the status through
the below link.https://www.syncfusion.com/feedback/35258/sidebar-showbackdrop-property-is-not-working-properly-while-setting-the-target However, as of now we
can overcome this by using the Sidebar open
event. Check the below code snippet.

open()
  {
   
  var
  overlay = document.createElement('div');
   
  overlay.className = 'e-sidebar-overlay';
   
  overlay.style.display = 'block';
   
  //Enables back drop for the Target area.
   
  document.getElementsByClassName('content-wrapper')[0].appendChild(overlay);
  }

Sample: https://stackblitz.com/edit/react-29ehsf-sgojw2?file=index.js,index.css,package.jsonPlease check the
shared details and get back to us if you need any further assistance.Regards,Indhumathy L

Ton That Hung · Answer

Oh, thanks for your support.

Indhumathy Loganathan · Answer

Hi Ton,We are glad that your query has been resolved. Please get back to us if you need any further assistance.Regards,Indhumathy L

Prasanth Madhaiyan · Answer

Hi Ton, Thanks for
your patience.We are glad to announce that our patch release (V20.1.60)
has been rolled out successfully. The issue "Sidebar showBackdrop property is not
working properly while setting the target property" has
been resolved in this release. To access this fix, we suggest you update the
package to the 20.1.60.Please find the sample from below link.Sample : https://stackblitz.com/edit/react-29ehsf-udgzzz?file=index.jsRelease notes: https://ej2.syncfusion.com/react/documentation/release-notes/20.1.60/?type=all#sidebarFeedback : https://www.syncfusion.com/feedback/35258/sidebar-showbackdrop-property-is-not-working-properly-while-setting-the-targetPlease let us know if you need any further assistance.Regards,Prasanth Madhaiyan.