:recycle: fixing up things to remove warnings and runtime errs

frontend/src/App.vue

@@ -1,5 +1,4 @@
 <template lang="pug">
-navbar
 main
     router-view
 </template>
@@ -7,7 +6,8 @@ main
 <script>
 export default {
   name: "app",
-};
+  components: {}
+}
 </script>
 
 <style lang="postcss">

frontend/src/main.js

@@ -4,7 +4,7 @@ import router from './router'
 
 router.beforeEach((to, from, next) => {
   const requiresAuth = false
-  const requiresProfile = false
+  const requiresProfile = true
 
   if (requiresAuth) {
     console.log('You are not authorized to access this area.')
@@ -13,12 +13,12 @@ router.beforeEach((to, from, next) => {
     next()
   }
 
-  if (requiresProfile) {
-    console.log('You must first complete your profile.')
-    next('profile')
-  } else {
-    next()
-  }
+  // if (requiresProfile) {
+  //   console.log('You must first complete your profile.')
+  //   next('profile')
+  // } else {
+  //   next()
+  // }
 })
 
 createApp(App).use(router).mount('#app')

frontend/src/shared/MainHeader.vue

@@ -1,31 +1,23 @@
 <template>
   <div id="main-header">
     <router-link class="header__icon mobile--only" to="/friends">
-      <AccountGroupIcon fillColor="#989898" :size="30" />
+      <p> friends
     </router-link>
     
     <router-link class="header__icon" to="/">
-      <FireIcon fillColor="#fd5068" :size="40" />
+      <p> home
     </router-link>
 
     <router-link class="header__icon mobile--only" to="/profile">
-      <AccountIcon fillColor="#989898" :size="30" />
+      <p> profile
     </router-link>
   </div>
 </template>
 
 <script>
-import AccountGroupIcon from "vue-material-design-icons/AccountGroup.vue";
-import FireIcon from "vue-material-design-icons/Fire.vue";
-import AccountIcon from "vue-material-design-icons/Account.vue";
 export default {
   name: "main-header",
-  components: {
-    AccountGroupIcon,
-    FireIcon,
-    AccountIcon,
-  },
-};
+}
 </script>
 
 <style scoped>
@@ -37,19 +29,4 @@ export default {
   border-bottom: 1px solid #f5f0f0c2;
   padding: 2px;
 }
-.header__icon {
-  cursor: pointer;
-  padding: 20px;
-  border-radius: 15px;
-  background: transparent;
-}
-.header__icon:hover {
-  transform: scale(1.06);
-  transition: all 0.2s ease-in-out;
-}
-@media only screen and (min-width: 768px) {
-  .mobile--only {
-    display: none;
-  }
-}
 </style>

frontend/src/shared/Sidebar.vue

@@ -0,0 +1,25 @@
+<template lang="pug">
+.sidebar__messages
+  h4.message__title {{ title }}
+  router-link(:to="`/chats/${user.uid}`" v-for="user in users" :key="user.uid" :class="[uid == user.uid ? 'active' : '',  'sidebar__message']")
+    .message__left
+      p avatar and status
+    .message__right
+      h4.message__name {{ user.name }}
+      p.message__content {{ user.metadata.rawMetadata || "Hello!" }}
+</template> 
+
+<script>
+export default {
+  data() {
+    return {
+      title: 'i am a title',
+      uid: 111,
+      users: [
+        { name:'sample', uid: 111, metadata: { rawMetadata: 'rawmeta' } },
+        { name:'usample', uid: 112, metadata: { rawMetadata: 'morerawmeta' } }
+      ]
+    }
+  }
+}
+</script>

frontend/src/views/Chats.vue

@@ -29,7 +29,6 @@
                   <div class="msg--wrapper">
                     <div class="bubble--wrapper">
                       <p> avatar goes here
-
                       <div class="msg-bubble">
                         <div class="msg-info">
                           <div class="msg-info-name">{{ user.name }}</div>

frontend/src/views/home.vue

@@ -5,13 +5,15 @@
         <p>cards and header</p>
       </div>
     </div>
-    <p>sidebar</p>
+    <sidebar />
   </div>
 </template>
 
 <script>
+import sidebar from '../shared/Sidebar.vue'
 export default {
   name: "home",
+  components: {sidebar},
   data() {
     return {
       swipables: [],
@@ -36,16 +38,16 @@ html
   background-color: #f9f9f9
 .wrapper
   position: relative
-.content-wrapper
-  float: right
-  width: 100%
 .content
   margin-left: 320px
   clear: both
   overflow: auto
   background: #f9f9ff
   min-height: 100vh
-  
+  &-wrapper
+    float: right
+    width: 100%
+
 @media only screen and (max-width: 768px)
   .content
     margin-left: 0