We the user clicks on a blog marker on the map, we need to display its content in the side pane. We will do this in a dedicated PostContent component.

1. Let's implement the content/PostContent.vue component by starting the initial template:

      <template>
        <div class="post-content">
          <template v-if="details">
            <div class="title">
              <img :src="details.author.profile.photos[0].value" />
              <span>
                <span>{{ details.title }}</span>
                <span class="info">
                  <span class="name">
                    {{ details.author.profile.displayName }}</span>
                  <span class="date">{{ details.date | date }}</span>
                </span>
              </span>
            </div>
            <div class="content">{{ details.content }}</div>
            <!-- TODO Comments -->
            <div class="actions">
              <button
                type="button"
                class="icon-button secondary"
                @click="unselectPost">
                <i class="material-icons">close</i>
              </button>
              <!-- TODO Comment input -->
            </div>
          </template>
          <div class="loading-animation" v-else>
            <div></div>
          </div>
        </div>
      </template>

The first part is the header with the author avatar, the title, author name, and creation date. Then we display the post content, followed by the comment list, and an action toolbar at the bottom. It will also display a loading animation before we receive the post details response from the server.

2. Then we need a script section with the details getter and the unselectPost action from the posts module:

      <script>
      import { createNamespacedHelpers } from 'vuex'

      // posts module
      const {
        mapGetters: postsGetters,
        mapActions: postsActions,
      } = createNamespacedHelpers('posts')

      export default {
        computed: {
          ...postsGetters({
            details: 'selectedPostDetails',
          }),
        },

        methods: {
          ...postsActions([
            'unselectPost',
          ]),
        },
      }
      </script>

Now you can try selecting a post marker and see its content displayed in the right side panel: