From fab878e2e711ca95c01fbdf64b8e76c7d1a8eee1 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Wed, 7 Jul 2021 15:18:01 +0200
Subject: [PATCH] add SideViewComponent

---
 src/components/layouts/SideView.vue | 82 +++++++++++++++++++++++++++++
 src/components/layouts/index.js     |  1 +
 2 files changed, 83 insertions(+)
 create mode 100644 src/components/layouts/SideView.vue

diff --git a/src/components/layouts/SideView.vue b/src/components/layouts/SideView.vue
new file mode 100644
index 0000000..cf436e1
--- /dev/null
+++ b/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>
diff --git a/src/components/layouts/index.js b/src/components/layouts/index.js
index fa922c4..5bd5799 100644
--- a/src/components/layouts/index.js
+++ b/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'