Initial commit

lib/assets/javascripts/new-dashboard/components/Apps/AppTabs.vue

@@ -0,0 +1,73 @@
+<template>
+  <ul class="app-tabs">
+    <li class="app-tabs-item">
+      <a :href="`${ baseUrl }/your_apps`" class="text is-small is-txtPrimary app-tabs-link">{{ $t(`SettingsPages.tabs.apiKeys`) }}</a>
+    </li>
+    <li class="app-tabs-item is-active">
+      <router-link :to="{ name: 'oauth_apps_list' }" class="text is-small is-txtPrimary app-tabs-link">
+        {{ $t(`SettingsPages.tabs.oAuthApps`) }}
+      </router-link>
+    </li>
+    <li class="app-tabs-item">
+      <a :href="`${ baseUrl }/your_apps/mobile`" class="text is-small is-txtPrimary app-tabs-link">{{ $t(`SettingsPages.tabs.mobileApps`) }}</a>
+    </li>
+  </ul>
+</template>
+
+<script>
+import { mapState } from 'vuex';
+
+export default {
+  name: 'AppTabs',
+  computed: {
+    ...mapState({
+      baseUrl: state => state.user.base_url
+    })
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'new-dashboard/styles/variables';
+
+.app-tabs {
+  display: flex;
+  margin-bottom: 26px;
+  border-bottom: 1px solid $neutral--300;
+}
+
+.app-tabs-item {
+  position: relative;
+  margin-right: 32px;
+  padding-bottom: 34px;
+  transform: translate3d(0, 1px, 0);
+
+  &.is-active {
+    &::before {
+      content: '';
+      position: absolute;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      height: 1px;
+      background: $neutral--800;
+    }
+
+    .app-tabs-link {
+      color: $text__color;
+    }
+  }
+}
+
+.app-tabs-link {
+  &.is-active {
+    color: $text__color;
+  }
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+</style>