diff --git a/src/components/layouts/SideView.vue b/src/components/layouts/SideView.vue
index cf436e1..b37da19 100644
--- a/src/components/layouts/SideView.vue
+++ b/src/components/layouts/SideView.vue
@@ -1,21 +1,29 @@
 <template>
   <b-sidebar
-    class="side-view"
+    class="side-view no-events-container"
     v-bind="$attrs" v-on="$listeners"
     no-header
+    :id="id"
+    :body-class="{ paddings: !noCross }"
+    backdrop backdrop-variant="light"
   >
     <template #default="{ hide }">
-      <div class="btn-close-wrapper">
+      <div v-if="!noCross" class="btn-close-wrapper">
         <button-close @click="hide()" />
       </div>
-      <slot name="default" />
+      <slot name="default" v-bind="{ hide }" />
     </template>
   </b-sidebar>
 </template>
 
 <script>
 export default {
-  name: 'SideView'
+  name: 'SideView',
+
+  props: {
+    id: { type: String, required: true },
+    noCross: { type: Boolean, default: false }
+  }
 }
 </script>
 
@@ -23,13 +31,11 @@ export default {
 .side-view {
   position: absolute;
   height: 100%;
-  pointer-events: none;
 
   ::v-deep {
     .b-sidebar {
       position: absolute;
       background-color: red;
-      pointer-events: auto;
       width: auto;
 
       @include media-breakpoint-down($size-bp-down) {
@@ -47,15 +53,18 @@ export default {
           border-left: $line;
         }
       }
-
     }
 
-    .b-sidebar-body {
+    .b-sidebar-body.paddings {
       padding: $node-view-spacer-sm-y $node-view-spacer-sm-x;
       @include media-breakpoint-up($layout-bp) {
         padding: $node-view-spacer-y $node-view-spacer-x;
       }
     }
+
+    .b-sidebar-backdrop {
+      opacity: 0.3;
+    }
   }
 
   .btn-close-wrapper {