Refactor #3965 - Refactor on Sidebar

components/lib/sidebar/BaseSidebar.vue

@@ -4,14 +4,7 @@ import { useStyle } from 'primevue/usestyle';
 
 const styles = `
 .p-sidebar-mask {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
     display: none;
-    justify-content: center;
-    align-items: center;
     pointer-events: none;
     background-color: transparent;
     transition-property: background-color;
@@ -91,23 +84,6 @@ const styles = `
     transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);
 }
 
-/* Position */
-.p-sidebar-left {
-    justify-content: flex-start;
-}
-
-.p-sidebar-right {
-    justify-content: flex-end;
-}
-
-.p-sidebar-top {
-    align-items: flex-start;
-}
-
-.p-sidebar-bottom {
-    align-items: flex-end;
-}
-
 /* Size */
 .p-sidebar-left .p-sidebar {
     width: 20rem;
@@ -177,17 +153,36 @@ const styles = `
 }
 `;
 
+/* Position */
+const inlineStyles = {
+    mask: ({ position }) => ({
+        position: 'fixed',
+        height: '100%',
+        width: '100%',
+        left: 0,
+        top: 0,
+        display: 'flex',
+        justifyContent: position === 'left' ? 'flex-start' : position === 'right' ? 'flex-end' : 'center',
+        alignItems: position === 'top' ? 'flex-start' : position === 'bottom' ? 'flex-end' : 'center'
+    })
+};
+
 const classes = {
-    mask: ({ instance, props }) => [
+    mask: ({ instance, props }) => {
-        'p-sidebar-mask',
+        const positions = ['left', 'right', 'top', 'bottom'];
-        instance.getPositionClass(),
+        const pos = positions.find((item) => item === props.position);
-        {
+
-            'p-component-overlay p-component-overlay-enter': props.modal,
+        return [
-            'p-sidebar-mask-scrollblocker': props.blockScroll,
+            'p-sidebar-mask',
-            'p-sidebar-visible': instance.containerVisible,
+            {
-            'p-sidebar-full': instance.fullScreen
+                'p-component-overlay p-component-overlay-enter': props.modal,
-        }
+                'p-sidebar-mask-scrollblocker': props.blockScroll,
-    ],
+                'p-sidebar-visible': instance.containerVisible,
+                'p-sidebar-full': instance.fullScreen
+            },
+            pos ? `p-sidebar-${pos}` : ''
+        ];
+    },
     root: ({ instance }) => [
         'p-sidebar p-component',
         {
@@ -248,6 +243,7 @@ export default {
     },
     css: {
         classes,
+        inlineStyles,
         loadStyle
     },
     provide() {

components/lib/sidebar/Sidebar.vue

@@ -1,6 +1,6 @@
 <template>
     <Portal>
-        <div v-if="containerVisible" :ref="maskRef" @mousedown="onMaskClick" :class="cx('mask')" v-bind="ptm('mask')">
+        <div v-if="containerVisible" :ref="maskRef" @mousedown="onMaskClick" :class="cx('mask')" :style="sx('mask', true, { position })" v-bind="ptm('mask')">
             <transition name="p-sidebar" @enter="onEnter" @after-enter="onAfterEnter" @before-leave="onBeforeLeave" @leave="onLeave" @after-leave="onAfterLeave" appear>
                 <div v-if="visible" :ref="containerRef" v-focustrap :class="cx('root')" role="complementary" :aria-modal="modal" @keydown="onKeydown" v-bind="{ ...$attrs, ...ptm('root') }">
                     <div :ref="headerContainerRef" :class="cx('header')" v-bind="ptm('header')">
@@ -151,12 +151,6 @@ export default {
         closeButtonRef(el) {
             this.closeButton = el;
         },
-        getPositionClass() {
-            const positions = ['left', 'right', 'top', 'bottom'];
-            const pos = positions.find((item) => item === this.position);
-
-            return pos ? `p-sidebar-${pos}` : '';
-        },
         bindOutsideClickListener() {
             if (!this.outsideClickListener) {
                 this.outsideClickListener = (event) => {