UserActions component in two styles

Author: ratron

vue/src/components/UserActions.vue

@@ -4,7 +4,7 @@
   "de": {
     "loginText": "Login",
     "signupText": "Unverbindliche Anfrage"
-  },
+},
   "fr": {
     "loginText": "Login",
     "signupText": "Demande sans engagement"
@@ -14,17 +14,35 @@
 <!-- eslint-enable -->
 
 <template>
-  <div>
-    <v-btn small text color="primary">
-      <router-link :to="'/' + $i18n.locale + '/login'">{{ $t('loginText') }}</router-link>
-    </v-btn>
-    <v-btn small outlined color="primary">
-      <router-link key="signup" :to="'/' + $i18n.locale + '/signup'">
-        {{ $t('signupText') }}
-      </router-link>
-    </v-btn>
-  </div>
+<div v-if="vertical">
+   <v-btn small text color="white" class="mt-4">
+    <router-link :to="'/' + $i18n.locale + '/login'">{{ $t('loginText') }}</router-link>
+  </v-btn><br>
+  <v-btn small outlined color="white" class="mt-4">
+    <router-link key="signup" :to="'/' + $i18n.locale + '/signup'">
+      {{ $t('signupText') }}
+    </router-link>
+  </v-btn>
+</div>
+<div v-else>
+  <v-btn small text color="primary">
+    <router-link :to="'/' + $i18n.locale + '/login'">{{ $t('loginText') }}</router-link>
+  </v-btn>
+  <v-btn small outlined color="primary">
+    <router-link key="signup" :to="'/' + $i18n.locale + '/signup'">
+      {{ $t('signupText') }}
+    </router-link>
+  </v-btn>
+</div>
 </template>
 
-<style>
-</style>
+<script>
+export default {
+  name: 'UserActions',
+  data() {
+    return {
+    };
+  },
+  props: ['vertical']
+};
+</script>