siimee/frontend/src/components/Sidebar.vue

<template lang="pug">
aside.sidebar.p-1.f-col.between
    h3 Messages
    .search
        input
        label search

    messages(:title="title" :users="users")
    .spacer.f-grow
    .temp-control-box.f-row.start.center
        p.t-up.p-0 current user
        input(v-model='mypid' style="width: 50px")
        button(@click="$emit('updatePid', mypid)").t-up.p-0 switch
</template>

<script>
import messages from './Messages.vue'

export default {
    components: { messages }, 
    data: () => ({
        title:'Messages from Matches',
        mypid: 45,
        users: [
            {
                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',
                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' },
            },
        ],
    }),
    created() {
        this.$emit('updatePid', this.mypid)
    }
}
</script>

<style lang="postcss">
aside.sidebar
    background-color: yellow
    height: 100vh
    h3
        padding: 2vh

.search
    display: flex
    flex-direction: row
    input
        border: 0

</style>