#237 for sidebar

public/themes/nova-light/theme.css

@@ -3248,6 +3248,9 @@ body .p-sidebar .p-sidebar-close {
 body .p-sidebar .p-sidebar-close:hover {
   color: #333333;
 }
+body .p-sidebar-mask {
+  transition-duration: 0.2s;
+}
 body .p-tooltip .p-tooltip-text {
   background-color: #333333;
   color: #ffffff;

src/components/sidebar/Sidebar.vue

@@ -83,21 +83,28 @@ export default {
         enableModality() {
             if (!this.mask) {
                 this.mask = document.createElement('div');
+                this.mask.setAttribute('class', 'p-sidebar-mask');
                 this.mask.style.zIndex = String(parseInt(this.$refs.container.style.zIndex, 10) - 1);
-                DomHandler.addMultipleClasses(this.mask, 'p-component-overlay');
                 if (this.dismissable) {
                     this.bindMaskClickListener();
                 }
                 document.body.appendChild(this.mask);
                 DomHandler.addClass(document.body, 'p-overflow-hidden');
+
+                setTimeout(() => {
+                    DomHandler.addClass(this.mask, 'p-component-overlay');
+                }, 1);
             }
         },
         disableModality() {
             if (this.mask) {
+                DomHandler.addClass(this.mask, 'p-sidebar-mask-leave');
+                this.mask.addEventListener('transitionend', () => {
                     this.unbindMaskClickListener();
                     document.body.removeChild(this.mask);
                     DomHandler.removeClass(document.body, 'p-overflow-hidden');
                     this.mask = null;
+                });
             }
         },
         bindMaskClickListener() {
@@ -136,6 +143,15 @@ export default {
     transition: transform .3s;
 }
 
+.p-sidebar-mask {
+    background-color: transparent;
+    transition: background-color;
+}
+
+.p-sidebar-mask-leave.p-component-overlay {
+    background-color: transparent;
+}
+
 .p-sidebar-left {
     top: 0;
     left: 0;