small fixes, cleans up API

lootalot_front/src/components/HeaderBar.vue

@@ -2,24 +2,35 @@
   <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">
+      <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false"
+         @click="switchMobileVisibility">
 	  <span aria-hidden="true"></span>
 	  <span aria-hidden="true"></span>
 	  <span aria-hidden="true"></span>
 	</a>
     </div>
-    <div id="menu" class="navbar-menu">
+    <div id="menu" class="navbar-menu" :class="{'is-active': showOnMobile }">
       <div class="navbar-end">
       <div class="navbar-item has-dropdown is-hoverable">
         <a class="navbar-link">Autres</a>
-        <div class="navbar-dropdown is-right">
+        <div class="navbar-dropdown is-right" @click="switchMobileVisibility">
           <slot name="links">
           <a class="navbar-item">History of Loot</a>
           </slot>
-	</div>
+	    </div>
       </div>
       </div>
     </div>
   </nav>
 </template>
 
+<script>
+    export default {
+        data () { return { showOnMobile: false } },
+        methods: {
+            switchMobileVisibility () {
+                this.showOnMobile = !this.showOnMobile
+            }
+        }
+    }
+</script>