feat: add frontend

frontend/components/TeamHeader.vue

@@ -0,0 +1,56 @@
+<template>
+  <header>
+      <nuxt-link to="/" class="title">
+        <svg width="13" height="16" viewBox="0 0 13 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path
+            d="M0 7.07348C0 6.81265 0.101912 6.56214 0.284 6.37538L5.784 0.73436C6.17647 0.331827 6.82353 0.331826 7.216 0.734359L12.716 6.37538C12.8981 6.56214 13 6.81265 13 7.07348V15C13 15.5523 12.5523 16 12 16H1C0.447715 16 0 15.5523 0 15V7.07348Z"
+            fill="#8BCDCD"/>
+          </svg>
+        Boussolle <span class="bold">PLUSS</span>
+      </nuxt-link>
+      <span class="team">
+        Équipe : {{ team }}
+      </span>
+  </header>
+</template>
+
+<script lang="ts">
+import {Component, Vue} from "nuxt-property-decorator";
+
+@Component
+export default class TeamHeader extends Vue {
+
+  get team() {
+    return this.$auth.user ? this.$auth.user.username : "Non connecté";
+  }
+}
+</script>
+
+
+<style lang="scss" scoped>
+  @import "assets/css/color";
+  @import "assets/css/spacing";
+  @import "assets/css/font";
+
+  header {
+    margin-top: $xx_small;
+    color: $black;
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .title {
+    text-transform: uppercase;
+    color: $black;
+    text-decoration: none;
+  }
+
+  .title svg {
+    margin-right: $xxx_small;
+  }
+
+  .team {
+    font-size: $small-font-size;
+  }
+
+</style>