Added header bar and removed the custom ones from Room and Practice p…

…ages

src/App.vue

@@ -1,12 +1,35 @@
 <template>
   <div id="app">
+    <header>
+      <div id="header-info">
+        <h1>BlueBoard</h1>
+        <!-- Display current page name -->
+        <h1 id="header-route" style="text-transform: capitalize">{{ this.$route.name }}</h1>
+      </div>
+      <div id="user-menu">
+        <!-- Show link to go home if router link is not home -->
+        <h1 v-if="this.$route.name != 'home'">
+          <router-link to='/'>Home</router-link>
+        </h1>
+        <!-- Show user notification button and menu button if user logged in -->
+        <img v-if="this.$store.state.user != null" @click="showNotifications = !showNotifications" src="http://placehold.it/25x25" alt="Notification">
+        <img v-if="this.$store.state.user != null"  @click="showUserMenu = !showUserMenu" src="./assets/blank-profile-picture.png" alt="Profile">
+      </div>
+    </header>
+
     <router-view></router-view>
   </div>
 </template>
 
 <script>
 export default {
-  name: 'app'
+  name: 'app',
+  data() {
+    return {
+      showUserMenu: false,
+      showNotifications: false
+    }
+  }
 }
 </script>
 
@@ -24,9 +47,52 @@ body {
   color: white;
   height: 100vh;
   width: 100vw;
+  overflow-x: hidden;
 }
+
+a {
+    color: white;
+    text-decoration: none;
+}
+
 .editor {
   height: 100%;
   width: 100%;
 }
+
+header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 50px;
+  padding: 0 10px;
+  width: calc(100% - 20px);
+  background: rgb(87, 73, 112);
+}
+
+#header-info {
+  display: flex;
+}
+
+#header-info > h1, #user-menu > h1 {
+  margin-right: 20px;
+  font-size: 25px;
+}
+
+#user-menu {
+  display: flex;
+  align-items: center;
+}
+
+#user-menu > img{
+  width: 25px;
+  height: 25px;
+  border-radius: 50%;
+  margin-right: 10px;
+  border: 5px solid rgb(58, 47, 78);
+}
+#user-menu > img:hover{
+  border: 5px solid rgb(41, 33, 56);
+  cursor: pointer;
+}
 </style>

src/components/Home.vue

@@ -38,7 +38,7 @@ export default {
 </script>
 <style>
 #home {
-    width: 100vw;
+    width: 100%;
     height: 100vh;
     display: flex;
     justify-content: center;

src/components/Practice.vue

@@ -1,9 +1,5 @@
 <template>
 <div>
-    <div class="top-bar">
-        <h1>BlueBoard - Practice Room</h1>
-        <h1><router-link to="/">Home</router-link></h1>
-    </div>
     <div class="content-practice">
         <div class="check-incorrect" v-if='checkResponse'>{{checkResponse}}</div>
         <div class="editor-controls">
@@ -97,31 +93,12 @@ export default {
 </script>
 
 <style>
-.top-bar {
-    display: flex;   
-    align-items: center;
-    justify-content: space-between;
-    padding-left: 10px;
-    background: rgb(87, 73, 112);
-    width: calc(100vw - 10px); /* Calculate width minus padding */
-    height: 50px;
-}
 .content-practice {
     display: flex;
     flex-direction: column;
     align-items: center;
 }
 
-.top-bar > h1 {
-    margin: 0;
-    width: 300px !important;
-}
-
-.top-bar > h1 > a {
-    color: white;
-    text-decoration: none;
-}
-
 .prompt {
     background: #272822;
     min-height: 50px;

src/components/Room.vue

@@ -1,9 +1,5 @@
 <template>
 <div>
-    <div class="top-bar">
-        <h1>BlueBoard - Room: {{ roomNumber }}</h1>
-        <h1 style="text-align: right;"><router-link to='/'>Home</router-link></h1>
-    </div>
     <div class="content-grid">
         <div class="col1">
         <editor v-bind:roomNumber="roomNumber" v-bind:socket="socket" class="editor-block"></editor>
@@ -78,20 +74,6 @@ export default {
 }
 </script>
 <style>
-.top-bar {
-    display: flex;   
-    align-items: center;
-    padding-left: 10px;
-    background: rgb(87, 73, 112);
-    width: calc(100vw - 10px); /* Calculate width minus padding */
-    height: 50px;
-}
-
-.top-bar > h1 {
-    margin-right: 20px;
-    font-size: 20px;
-}
-
 .content-grid {
     height: calc(100vh - 50px);
     width: 100%;