1 files changed, 59 insertions, 0 deletions
diff --git a/src/components/_sila/Global/Collapse.vue b/src/components/_sila/Global/Collapse.vue
new file mode 100644
index 00000000..c8665c28
--- /dev/null
+++ b/src/components/_sila/Global/Collapse.vue
@@ -0,0 +1,59 @@
+<template>
+  <div class="page-collapse-decorator">
+    <b-button
+      v-b-toggle="id"
+      variant="collapse"
+      class="d-flex flex-nowrap justify-content-start"
+    >
+      <img :src="require(imgPath)" />
+      {{ title }}
+      <component :is="iconChevronUp" class="icon-expand" />
+    </b-button>
+    <b-collapse :id="id" class="nav-item__nav">
+      <slot></slot>
+    </b-collapse>
+  </div>
+</template>
+<script>
+import iconChevronUp from '@carbon/icons-vue/es/chevron--up/20';
+
+export default {
+  name: 'Collapse',
+  props: {
+    id: {
+      type: String,
+      default: null,
+    },
+    imgPath: {
+      type: String,
+      default: '@/assets/images/_sila/collapsed/temperature.svg',
+    },
+    title: {
+      type: String,
+      default: 'collapsed title',
+    },
+  },
+  data() {
+    return {
+      iconChevronUp: iconChevronUp,
+    };
+  },
+};
+</script>
+<style lang="scss" scoped>
+//nav items style
+.nav-item,
+.nav-link {
+  padding: 0;
+}
+.nav-item {
+  list-style-type: none;
+}
+
+a {
+  color: $text-primary !important;
+  &:hover {
+    color: $text-primary !important;
+  }
+}
+</style>