From 84ee6ea0c4ff5ff69e6aaeac2f587e491d9b3eb7 Mon Sep 17 00:00:00 2001
From: Maksim Zakharov <m.zakharov@IBS.RU>
Date: Thu, 21 Jul 2022 16:08:13 +0300
Subject: create accessoryTable(no styles for XS size, start to create collapse
 component)

---
 src/components/_sila/Global/Collapse.vue | 59 ++++++++++++++++++++++++++++++++
 1 file changed, 59 insertions(+)
 create mode 100644 src/components/_sila/Global/Collapse.vue

(limited to 'src/components/_sila/Global')

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>
-- 
cgit v1.2.3