Untitled

<template>

  <div class = "application">

    <ul class = "scrollable-list">
        <li>
            <PostItem v-for="(item, index) in items" 
                :title="item.title"
                :content="item.content"
                :key="index"
            />
        </li>
    </ul>

    <br />
    <br />

    <div class="create-post">
        <input v-model="title" placeholder="Enter title here">
        <br />
        <br />
        <textarea v-model="message" placeholder="Enter post here"></textarea><br />
        
        <br/><button @click="getPosts" >Refresh</button> <button class="toggle" @click="drawerVisible = true">Post</button>
    </div>
    <div 
        class="post-drawer"
        :style="{
            width: drawerVisible? '20vw' : '0',
            paddingLeft: drawerVisible? '10px' : '0',
        }"
      >
        <input v-model="title" placeholder="Enter title here">
        <br />
        <br />
        <textarea v-model="message" placeholder="Enter post here"></textarea><br />
        <br />
        <button @click="post">Post</button>
        </div>
        <div 
            class="drawer-mask"
            :style="{
                width: drawerVisible ? '100vw' : '0',
                opacity: drawerVisible ? '0.6' : '0',
            }"
            @click="drawerVisible = false"
        ></div>
  </div>
  
</template>

<script>
import PostItem from './components/PostItem.vue';


export default {
    name: 'App',
    components: {
        PostItem
    },
    created() {
        this.getPosts()
    },
    data() {
        return {
            items: null,
            title: null,
            message: null,
            drawerVisible: false
        }
    },
    methods: {
        async getPosts() {
        
        },
        async post() {
        
        }
    }
}
</script>

<style>
#app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: left;
    color: #2c3e50;
    margin-top: 60px;
    margin-left: 100px;
    width: 100%;
    height: 100%;
}
ul {
    list-style-type: none;
    padding: 0;
}
li {
    display: inline-block;
}
.post-drawer {
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    overflow: hidden;
    height: 100%;
    padding-left: 0;
    border-left: 1px solid whitesmoke;
    background: white;
    z-index: 200;
    transition: all 0.2s;
}
.drawer-mask {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 100vh;
    background: #000;
    opacity: 0.3;
    z-index: 199;
}
.application {
    height: 100vh;
    width: 100vw;
    overflow-y: auto;
}
.scrollable-list {
    width: max-content;
    height: 100vh;
    transition: all 0.2s;
}
</style>