siimee/frontend/src/components/Messages.vue

<template lang="pug">
.sidebar--messages
  h5.message__title messages from matches
  router-link(
        :to="`/chats/${profile.profile_id}`" 
        v-for='profile in matches' 
        :key='profile.profile_id' 
        :class="[pid == profile.profile_id ? 'active' : '', 'sidebar__message', 'f-col', 'start']"
    )
    .f-row.start
        img(:src='profile.avatar')
        .message__right.f-col
            h4.message__name {{ profile.name }}
            p.message__content {{ profile.metadata.rawMetadata || &quot;Hello I&apos;m using tinder!&quot; }}
</template>

<script>
import { mixins } from '../utils'

export default {
    name: 'ProfileMessages',
    mixins: [mixins.pidMixin],
    props: {
        matches: {
            type: [Object, Array],
            default: () => [],
        },
    },
}
</script>

<style lang="postcss">
/* prettier-ignore */
.sidebar
    &--messages
        padding: 20px 10px
        /* overflow-y: scroll */
        text-align: left
        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
            border-radius: 50%

.message
    &__title
        color: #fd5068
        text-transform: uppercase
        margin-bottom: 10px
    &__right
        margin-left: 10px
    &__name
        padding-top: 5px
        font-weight: 600
    &__content
        padding-top: 10px
        line-height: 1em
</style>