simplify layout

frontend/src/App.vue

 <template lang="pug">
 sidebar
-main.f-col
+main.f-col.start.w-full
     router-view
+    main-nav
 </template>
 
 <script>
 import * as sss from '@/sss/import.css'
 import sidebar from './components/Sidebar.vue'
+import mainNav from './components/MainNav.vue'
 
 export default {
     name: 'app',
-    components: { sidebar,  },
+    components: { sidebar, mainNav },
 }
 </script>
 
     font-family: $sans
     background-color: $secondary
     overflow-x: hidden
-
-    > aside
-        background-color: yellow
-
+    height: 100%
+    > main
+        position: relative
+        height: 100%
+        > article
+            height: 100%
+            width: 100%
+            flex-direction: column
 
 </style>

frontend/src/components/MainNav.vue

 <template lang="pug">
-nav#main-header.w-full.f-row.around
+nav#main-header.w-full.f-row.around.p-2
     router-link.header__icon.mobile--only(to='/matches') matches
     router-link.header__icon(to='/') home
     router-link.header__icon.mobile--only(to='/profile') profile
 
 <style lang="postcss">
 #main-header
-  border-bottom: 1px solid #f5f0f0c2
-  padding: 2px
+  position: absolute
+  bottom: 1vh
+  right: 0
+
 
 @media only screen and (min-width: 768px)
   .mobile--only

frontend/src/components/Messages.vue

             :to="'/chats/' + user.uid"
             v-for="user in users"
             :key="user.uid"
-            :class="[uid == user.uid ? 'active' : '', 'sidebar__message']"
+            :class="[uid == user.uid ? 'active' : '', 'sidebar__message', 'f-col', 'start']"
         >
-            <div class="message__left">
-                <p>avatar goes here</p>
-            </div>
+            <div class="f-row start">
+                <img :src="user.avatar" />
 
-            <div class="message__right">
-                <h4 class="message__name">{{ user.name }}</h4>
-                <p class="message__content">
-                    {{ user.metadata.rawMetadata || "Hello I'm using tinder!" }}
-                </p>
+                <div class="message__right f-col">
+                    <h4 class="message__name">{{ user.name }}</h4>
+                    <p class="message__content">
+                        {{ user.metadata.rawMetadata || "Hello I'm using tinder!" }}
+                    </p>
+                </div>
             </div>
+
         </router-link>
     </div>
 </template>
         title: { type: String, default: 'Messages' },
         users: {
             type: [Object, Array],
-            default: function () {
-                return [
-                    {
-                        uid: '1',
-                        name: 'Fullname',
-                        avatar: 'https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/newborn-baby-boy-sleeping-peacefully-wearing-knit-royalty-free-image-1589459736.jpg?crop=0.669xw:1.00xh;0.228xw,0&resize=640:*',
-                        metadata: { age: '21', rawMetadata: 'Some Text Here!' },
-                    },
-                ]
-            },
         },
     },
     computed: {
 </script>
 
 <style lang="postcss">
-.sidebar__messages
-  padding: 20px 10px
-  height: calc(100vh - 300px)
-  overflow-y: scroll
-
-.sidebar__messages a
-  color: black
-  text-decoration: none
-
-.sidebar__messages a:hover
-  background: #f9f9ff
-  transition: 0.5s
-
-.active
-  background: #ececff
-  transition: 0.5s
-
-.message__title
-  color: #fd5068
-  margin-bottom: 10px
-
-.sidebar__message
-  display: flex
-  align-items: center
-  margin: 20px 0
-
-.message__left
-  width: 70px
-  height: 70px
-
-.message__left img
-  object-fit: cover
 
-.message__right
-  margin-left: 10px
+.sidebar
+    &__messages
+        padding: 20px 10px
+        /* overflow-y: scroll */
+        a
+            color: black
+            text-decoration: none
+            &:hover
+                background: #f9f9ff
+                transition: 0.5s
+            &.active
+                background: #ececff
+                transition: 0.5s
+    &__message
+        display: flex
+        align-items: center
+        margin: 20px 0
+        img
+            object-fit: cover
+            width: 70px
+            height: 70px
 
-.message__name
-  margin-bottom: 10px
+.message
+    &__title
+        color: #fd5068
+        margin-bottom: 10px
+    &__right
+        margin-left: 10px
+    &__name
+        margin-bottom: 10px
 </style>

frontend/src/components/Sidebar.vue

 <template lang="pug">
-aside.sidebar__messages.p-1
+aside.sidebar.p-1
     p messages
     input
     label search
 
-    router-link(
-        :class='[uid == user.uid ? "active" : "", "sidebar__message"]'
-        :key='user.uid'
-        :to='`/chats/${user.uid}`'
-        v-for='user in users'
-    )
-        h4.message__title.mv-0 {{ title }}
-        .row.f-row.mv-0
-            .message__left.mr-0
-                p avatar
-                p O
-            .message__right.t-left.f-grow
-                h4.message__name {{ user.name }}
-                p.message__content {{ user.metadata.rawMetadata || "Hello!" }}
-        hr
+    messages(:title="title" :users="users")
 </template>
 
 <script>
+import messages from './Messages.vue'
+
 export default {
+    components: { messages }, 
     data: () => ({
-        title: 'i am a title',
+        title:'i am a title',
         uid: 111,
         users: [
             {
-                name: 'bob mcrob',
+                name: 'Bob McRob',
                 uid: 111,
+                avatar: 'https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/newborn-baby-boy-sleeping-peacefully-wearing-knit-royalty-free-image-1589459736.jpg?crop=0.669xw:1.00xh;0.228xw,0&resize=640:*',
                 metadata: { rawMetadata: 'howdy howdy howdy' },
             },
             {
-                name: 'rob bebob',
+                name: 'Rob Bebob',
                 uid: 112,
+                avatar: 'https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/newborn-baby-boy-sleeping-peacefully-wearing-knit-royalty-free-image-1589459736.jpg?crop=0.669xw:1.00xh;0.228xw,0&resize=640:*',
                 metadata: { rawMetadata: 'this is the last message' },
             },
         ],
     }),
 }
 </script>
+
+<style lang="postcss">
+aside.sidebar
+    background-color: yellow
+    height: 100vh
+</style>

frontend/src/router/index.js

     {
         path: '/profile',
         component: Profile,
-        name: 'profile',
+        name: 'Profile',
         meta: { requiresAuth: true },
     },
     {

frontend/src/views/Matches.vue

 <template lang="pug">
-.match
-    .matches
-        h1 Matches
-        .row
-    .messages
-        h2 Messages
-        .matched.active
-            .messagecontent
-                h3 NSE Tropical
-                |
-                | Recently active, match now!
-        .matched
-            .messagecontent
-                h3 Golden Communications
-                |
-                | Click to match now!
-        .matched
-            .messagecontent
-                h3 Mojo Solutions
-                |
-                | Click to match now!
+article.match
+    h1 Match Page
 </template>
 
 <script>

frontend/src/views/Profile.vue

 <template lang="pug">
-.login__box
-    h2 Profile
-    form(@submit.prevent='onSubmit')
-        .user__box
-            input(
-                minlength='6'
-                required=''
-                type='text'
-                v-model='form.fullname'
-            )
-            label Fullname
-        .user__box
-            input(minlength='10' required='' type='text' v-model='form.avatar')
-            label Image URL
-        .user__box
-            input(
-                max='60'
-                maxlength='3'
-                min='18'
-                minlength='2'
-                required=''
-                type='number'
-                v-model='form.age'
-            )
-            label Age
-        .user__box
-            input(
-                maxlength='50'
-                minlength='10'
-                required=''
-                type='text'
-                v-model='form.metadata'
-            )
-            label Description
-        button(type='submit')
-            span
-            span
-            span
-            span {{ requesting ? "Log..." : "Update" }}
-        router-link.links(to='/') Back
+article#profile
+    h1 Profile Page
 </template>
 
 <script>
+
+
 export default {
-    name: 'ProfileUpdate',
+    name: 'Profile',
     data() {
         return {
             requesting: false,
             // this.setUser()
         },
         getUser() {
-            const uid = auth.currentUser.uid
+            // const uid = auth.currentUser.uid
             return
         },
         setUser() {
 </script>
 
 <style lang="postcss">
-
+#profile
 
 </style>

frontend/src/views/home.vue

 <template lang="pug">
-article#home.w-full.f-row.reverse
-    .content-wrapper.w-full
-        header
-            main-nav
-
-        profile-card-list(:uid='uid' :users='swipables')
+article#home
+    profile-card-list(:uid='uid' :users='swipables')
 </template>
 
 <script>
-import mainNav from '../components/MainNav.vue'
 import profileCardList from '../components/ProfileCardList.vue'
 
 export default {
     name: 'HomeView',
-    components: { mainNav, profileCardList },
+    components: { profileCardList },
     data: () => ({
         swipables: [],
         uid: null,
 }
 </script>
 
+<style lang="postcss">
+#home
+</style>