add backdrop opacity for sidePanel

Author: ozer550

contentcuration/contentcuration/frontend/administration/pages/Channels/ChannelDetailsSidePanel.vue

@@ -6,10 +6,8 @@
     :value="value"
     :permanent="true"
     :temporary="false"
-    clipped
-    app
     v-bind="$attrs"
-    style="z-index: 10; position: fixed;"
+    style="z-index: 10; position: fixed; top: 0; right: 0; height: 100vh;"
     @input="$emit('input', $event)"
     @resize="$emit('resize', $event)"
   >

contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogList.vue

@@ -98,6 +98,13 @@
         </VLayout>
       </BottomBar>
     </VContainer>
+    <transition name="backdrop" appear>
+      <div
+        v-if="showSidePanel"
+        class="backdrop"
+        @click="handleCloseSidePanel"
+      ></div>
+    </transition>
     <ChannelDetailsSidePanel
       v-if="showSidePanel"
       v-model="showSidePanel"
@@ -296,4 +303,41 @@
     margin: 0 auto;
   }
 
+  .backdrop {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 9;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.7);
+    background-attachment: fixed;
+  }
+
+  .backdrop-enter {
+    opacity: 0;
+  }
+
+  .backdrop-enter-to {
+    opacity: 1;
+  }
+
+  .backdrop-enter-active {
+    transition: opacity 0.2s ease-in-out;
+  }
+
+  .backdrop-leave {
+    opacity: 1;
+  }
+
+  .backdrop-leave-to {
+    opacity: 0;
+  }
+
+  .backdrop-leave-active {
+    transition: opacity 0.2s ease-in-out;
+  }
+
 </style>