siimee/frontend/src/components/Messages.vue

<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', 'f-col', 'start']")
    .f-row.start
      img(:src='user.avatar')
      .message__right.f-col
        h4.message__name {{ user.name }}
        p.message__content
          | {{ user.metadata.rawMetadata || &quot;Hello I&apos;m using tinder!&quot; }}
</template>

<script>
export default {
    name: 'messages',
    props: {
        title: { type: String, default: 'Messages' },
        users: {
            type: [Object, Array],
        },
    },
    computed: {
        uid() {
            return this.$route.params.uid
        },
    },
}
</script>

<style lang="postcss">

.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
    &__title
        color: #fd5068
        margin-bottom: 10px
    &__right
        margin-left: 10px
    &__name
        margin-bottom: 10px
</style>