Starts refactor using a PlayerView renderless component for Player logic

lootalot_front/src/components/HeaderBar.vue

@@ -0,0 +1,52 @@
+<template>
+  <nav class="navbar is-info">
+    <div class="navbar-brand">
+      <p class="navbar-item is-size-4"><slot name="title">...</slot></p>
+      <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false">
+	  <span aria-hidden="true"></span>
+	  <span aria-hidden="true"></span>
+	  <span aria-hidden="true"></span>
+	</a>
+    </div>
+    <div id="menu" class="navbar-menu">
+      <div class="navbar-start" v-if="!playerIsGroup">
+     	  <a class="navbar-item" @click="switchPlayerChestVisibility">
+     	    {{ app_state.show_player_chest ? 'Coffre de groupe' : 'Mon coffre' }}</a>
+      </div>
+      <div class="navbar-end">
+      <div class="navbar-item has-dropdown is-hoverable">
+        <a class="navbar-link">Autres</a>
+        <div class="navbar-dropdown is-right">
+          <a class="navbar-item">History of Loot</a>
+          <template v-if="playerIsGroup">
+            <hr class="navbar-divider">
+            <div class="navbar-item heading">Admin</div>
+            <a class="navbar-item">"Resolve claims"</a>
+            <a class="navbar-item">"Add player"</a>
+          </template>
+          <hr class="navbar-divider">
+          <div class="navbar-item heading">Changer</div>
+          <a v-for="(p,i) in app_state.player_list" :key="i"
+           @click="setActivePlayer(i)"
+           href="#" class="navbar-item">
+           {{ p.name }}</a>
+	</div>
+      </div>
+      </div>
+    </div>
+  </nav>
+</template>
+
+<script>
+    import { AppStorage } from '../AppStorage'
+    export default {
+        props: ["app_state"],
+        methods: {
+          setActivePlayer (idx) { AppStorage.setActivePlayer(idx); },
+          switchPlayerChestVisibility () { AppStorage.switchPlayerChestVisibility(); },
+         },
+        computed: {
+          playerIsGroup () { return this.app_state.player_id == 0 },
+        }
+    }
+</script>