add SideViewComponent

src/components/layouts/SideView.vue

@@ -0,0 +1,82 @@
+<template>
+  <b-sidebar
+    class="side-view"
+    v-bind="$attrs" v-on="$listeners"
+    no-header
+  >
+    <template #default="{ hide }">
+      <div class="btn-close-wrapper">
+        <button-close @click="hide()" />
+      </div>
+      <slot name="default" />
+    </template>
+  </b-sidebar>
+</template>
+
+<script>
+export default {
+  name: 'SideView'
+}
+</script>
+
+<style lang="scss" scoped>
+.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) {
+        width: 100%;
+      }
+
+      @include media-breakpoint-up($size-bp) {
+        max-width: 50%;
+
+        &:not(.b-sidebar-right) {
+          border-right: $line;
+        }
+
+        &.b-sidebar-right {
+          border-left: $line;
+        }
+      }
+
+    }
+
+    .b-sidebar-body {
+      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;
+      }
+    }
+  }
+
+  .btn-close-wrapper {
+    position: sticky;
+    z-index: 2;
+    height: 1.75rem;
+    width: 1.75rem;
+    top: 0;
+    right: 0;
+    float: right;
+    margin-top: -1rem;
+
+    .btn-close {
+      position: absolute;
+      padding: 0.5rem;
+      width: 2.25rem;
+      height: 2.25rem;
+      top: -.5rem;
+      right: -.5rem;
+      background-color: $white;
+    }
+  }
+}
+</style>

src/components/layouts/index.js

@@ -2,3 +2,4 @@ export { default as MapZoom } from './MapZoom'
 export { default as NodePreviewZone } from './NodePreviewZone'
 export { default as NodeBook } from './NodeBook'
 export { default as PageView } from './PageView'
+export { default as SideView } from './SideView'