feast/src/components/Header.vue

<template>
  <div id="header">
    <div>
      <a href="https://classic.feast.crux.sexy">Old Feast</a>
    </div>
    <div>Version: {{version}}</div>
    <div>
      <a href="https://discord.gg/2DmtgEM"><i class="fab fa-discord" /></a>
    </div>
  </div>
</template>

<script lang="ts">

import { Component, Vue, Prop } from 'vue-property-decorator'
import { Encounter } from '@/game/combat'

@Component({})
export default class Header extends Vue {
  @Prop({ required: true }) version!: string
}

</script>

<style scoped>
#header {
  flex: 0 1;
  width: 100%;
  background: #222;
  top: 0%;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
a {
  color: #66b
}
#header i {
  font-size: 5vh;
}
</style>