From f515b56e3f9c68074c06d9f2eaf834853c05080c Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Sun, 6 Feb 2022 20:34:49 +0100
Subject: [PATCH] add RoutableTabs component

---
 app/src/components/RoutableTabs.vue | 32 +++++++++++++++++++++++++++++
 1 file changed, 32 insertions(+)
 create mode 100644 app/src/components/RoutableTabs.vue

diff --git a/app/src/components/RoutableTabs.vue b/app/src/components/RoutableTabs.vue
new file mode 100644
index 00000000..d037a14b
--- /dev/null
+++ b/app/src/components/RoutableTabs.vue
@@ -0,0 +1,32 @@
+<template>
+  <b-card no-body>
+    <b-card-header header-tag="nav">
+      <b-nav card-header fill pills>
+        <b-nav-item
+          v-for="route in routes" :key="route.text"
+          :to="route.to" exact exact-active-class="active"
+        >
+          <icon v-if="route.icon" :iname="route.icon" />
+          {{ route.text }}
+        </b-nav-item>
+      </b-nav>
+    </b-card-header>
+
+    <!-- Bind extra props to the child view and forward child events to parent -->
+    <router-view v-bind="$attrs" v-on="$listeners" />
+  </b-card>
+</template>
+
+<script>
+export default {
+  name: 'RoutableTabs',
+
+  // Thanks to `v-bind="$attrs"` and `inheritAttrs: false`, this component can forward
+  // arbitrary attributes (props) directly to its children.
+  inheritAttrs: false,
+
+  props: {
+    routes: { type: Array, required: true }
+  }
+}
+</script>