Improve Sidebar component

[VsevolodGolovanov]

I'm submitting a ... (check one with "x")

[x] bug report
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://forum.primefaces.org/viewforum.php?f=57

Codesandbox Case (Bug Reports)
https://codesandbox.io/s/sidebar-over-a-part-of-ui-8vrv1

Current behavior
Sidebar allows appending it to something and styling, so that it would show over a part of UI, not the whole page. But the mask gets appended to body anyway, blocking the "main menu" and sidebar itself.

Expected behavior
Click the button. See sidebar modaility blocking the "main menu" and sidebar itself.

Minimal reproduction of the problem with instructions

Please tell us about your environment:

• React version:

• PrimeReact version:
  6.5.0

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

• Language: [all | TypeScript X.X | ES6/7 | ES5]

[VsevolodGolovanov]

Sidenote: the modality overlay is a separate element - it should have its own className property. Or maybe be it should wrap the sidebar itself, like Dialog does?