beta version of the lobby vue

frontend/src/views/Lobby.vue

 <template>
   <div class="lobby">
-    <user-ribbon username="Josie Péritel" pathToImage="avatar/criquette.jpg"/>
+    <user-ribbon class="lobby-ribbon" username="Josie Péritel" pathToImage="avatar/criquette.jpg"/>
+    <div class="lobby-content">
+      <div class="lobby-column">
+        <page-title pagetitle="Parties"/>
+        <form class="lobby-menu-form" action="#" @submit.prevent="onSubmitMenu">
+            <button-text id="profile" width="100%" height="130px" text="Profil"/>
+            <button-text id="new" width="100%" height="130px" text="Créer une partie"/>
+        </form>
+        <form class="lobby-menu-form" action="#" @submit.prevent="onSubmitJoinPrivate">
+            <text-input class="lobby-text-input" id="code" label="Code de la partie"/>
+            <button-text id="new" width="100%" height="130px" text="Rejoindre partie privée"/>
+        </form>
+        
+      </div>
+      <div class="lobby-column games-list">
+        
+        <form class="lobby-menu-form" action="#" @submit.prevent="onSubmitJoinPublic">
+            <button-text v-for="game of games" :key="game.id" :id="game.id" width="100%" height="80px" :text="game.name"/>
+        </form>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
 // @ is an alias to /src
 import UserRibbon from '@/components/UserRibbon.vue'
+import PageTitle from '../components/PageTitle.vue'
+import ButtonText from '../components/ButtonText.vue'
+import TextInput from '../components/form/TextInput.vue'
+
 
 export default {
   name: 'lobby',
   components: {
-    UserRibbon
+    UserRibbon,
+    PageTitle,
+    ButtonText,
+    TextInput
+  },
+  methods: {
+    onSubmitMenu: function(){
+      if (event.submitter.id=='profile') {
+        this.$router.push('profile');
+      }
+      if (event.submitter.id=='new') {
+        this.$router.push('new');
+      }
+    },
+    onSubmitJoinPrivate: function(){
+      this.$router.push('joinprivate/'+document.getElementById('code').value);
+
+    },
+    onSubmitJoinPublic: function(event){
+      this.$router.push('joinpublic/'+event.submitter.id);
+
+    }
+  },
+  data () {
+    return {
+      games: [
+        {id: 1, name: "Partie 1"},
+        {id: 2, name: "Partie 2"},
+        {id: 3, name: "Partie 3"},
+        {id: 4, name: "Partie 4"}
+      ]
+    }
+    
   }
 }
 </script>
 
 <style>
+.lobby-ribbon{
+  margin-left:auto; 
+  margin-right:0;
+}
+
+.lobby-content{
+  display: flex;
+  flex-direction: row;
+}
+
+.lobby-column{
+  width:50%;
+  display: flex;
+  flex-direction: column;
+  padding: 0 60px;
+}
+
+.lobby-menu-form{
+  width:100%;
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 40px;
+}
+
 .lobby{
   display: flex;
   flex-direction: column;
 }
+
+
+
+.lobby-text-input{
+  margin: 0;
+  padding: 20px;
+  background: rgba(196, 196, 196, 0.6);
+  margin-bottom: 36px;
+}
+
+.games-list{
+  height: 100%;
+}
 </style>