Remove hamburger

Move room list to dropdown, see issue #27

src/components/ChatHeader.vue

@@ -10,9 +10,13 @@
       </v-col>
 
       <v-col class="flex-grow-1 flex-shrink-1 ma-0 pa-0">
-        <div class="room-name" @click.stop="showRoomInfo">{{ room.summary.info.title }}</div>
+        <div class="room-name" @click.stop="showRoomList = true">{{ room.summary.info.title }} <v-icon>expand_more</v-icon></div>
+        <RoomList v-if="showRoomList" v-click-outside="hideRoomList" @close="hideRoomList" />
         <div class="num-members">{{ memberCount }}{{ memberCount > 1 ? " members" : " member" }}</div>
       </v-col>
+      <v-col class="text-center flex-grow-0 flex-shrink-1 ma-0 pa-0">
+        <v-btn text class="info-button" @click.stop="showRoomInfo"><v-icon color="black">info</v-icon></v-btn>
+      </v-col>
       <v-col class="text-center flex-grow-0 flex-shrink-1 ma-0 pa-0">
         <v-btn text class="leave-button" @click.stop="leaveRoom">Leave</v-btn>
       </v-col>
@@ -26,15 +30,18 @@
 
 <script>
 import LeaveRoomDialog from '../components/LeaveRoomDialog';
+import RoomList from "../components/RoomList";
 
 export default {
   name: "ChatHeader",
   components: {
-    LeaveRoomDialog
+    LeaveRoomDialog,
+    RoomList
   },
   data() {
     return {
       memberCount: null,
+      showRoomList: false,
       showLeaveConfirmation: false
     };
   },
@@ -90,6 +97,10 @@ export default {
     leaveRoom() {
       this.showLeaveConfirmation = true;
     },
+
+    hideRoomList() {
+      this.showRoomList = false;
+    }
   },
 };
 </script>

src/components/RoomInfo.vue

@@ -80,11 +80,14 @@
     <v-card class="account ma-3" flat>
       <v-card-title class="h2">My Profile</v-card-title>
       <v-card-text>
-        <div v-if="$matrix.currentUser.is_guest">
-          <div>
+        <div>
+          <div v-if="$matrix.currentUser.is_guest">
             Your identity <b>{{ displayName }}</b> is temporary. You can change
             your name or set a password to keep it.
           </div>
+          <div v-else>
+            Your are logged in as <b>{{ displayName }}</b>.
+          </div>
           <v-btn block class="outlined-button" @click.stop="viewProfile"
             >View</v-btn
           >

src/components/RoomList.vue

@@ -1,9 +1,9 @@
 <template>
-  <v-list dense>
+  <v-list dense class="room-list">
     <v-subheader>ROOMS</v-subheader>
     <v-list-item-group v-model="currentRoomId" color="primary">
       <v-list-item v-for="room in $matrix.rooms" :key="room.roomId" :value="room.roomId">
-        <v-list-item-avatar>
+        <v-list-item-avatar color="#e0e0e0">
           <v-img :src="room.avatar" />
         </v-list-item-avatar>
         <v-list-item-content>