siimee/frontend/src/components/SideBar.vue

<template lang="pug">
aside.sidebar.p-1.f-col
    .temp-control-box.f-row.start.center
        input(v-model="switchToPID")
        button(@click="$emit('updatePid', switchToPID)").t-up.p-0 switch profile
    
    Messages(:matches="matches" :pid="pid")
    
    .spacer.f-grow
</template>

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

export default {
    components: { Messages }, 
    props: {
        pid: {
            required: true,
            type: Number
        }
    },
    data: () => ({
        switchToPID: null,
        matches: [
            {
                name: 'Bob McRob',
                profile_id: 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',
                profile_id: 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' },
            },
        ],
    }),
    mounted() {
        // Set the form to display the default pid set in Home.vue
        this.switchToPID = this.pid
    }
}
</script>

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

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

</style>