:recycle: moving sidebars around | moving p2p related to its own file

vue-theme/src/components/sidebars/events.vue

+<template lang="pug">
+h3.t-up upcoming events
+ul
+    li
+        h1 event title
+        p date
+        p time from : time to
+        p location
+    li
+        h1 event title
+        p date
+        p time from : time to
+        p location
+    li
+        h1 event title
+        p date
+        p time from : time to
+        p location
+</template>

vue-theme/src/components/sidebars/exhibitions.vue

+<template lang="pug">
+h3.t-up upcoming exhibitions
+ul
+    li
+        h1 exhibition title
+        p date from : date to
+        p location
+    li
+        h1 exhibition title
+        p date from : date to
+        p location
+    li
+        h1 exhibition title
+        p date from : date to
+        p location
+</template>

vue-theme/src/components/sidebars/related.vue

+<template lang="pug">
+h3.t-up related {{ p2pPostType }}s
+    ul
+        li(v-for="relatedPost in p2pPostsByType[p2pPostType]")
+            router-link(v-if="relatedPost" :to="`/${relatedPost.type}s/${relatedPost.slug}`")
+                p {{ relatedPost.title }}
+</template>
+
+<script>
+export default {
+    props: {
+        p2pPostsByType:{
+            required: true
+        }
+    }
+}
+</script>

vue-theme/src/components/sidebars/sidebar.vue

                 li(v-for="option in sortOptions")
                     router-link(:to="`/${type}/${sortTypes[option]}`").t-cap
                         p {{ option }}
+        
         .shadow(v-else)
             p {{ type }} sidebar
+        
+        .shadow(v-if="layout === 'single' && Object.keys(related).length" v-for="p2pPostType in Object.keys(related)")
+            h3.t-up related {{ p2pPostType }}s
+            ul
+                li(v-for="relatedPost in related[p2pPostType]")
+                    router-link(v-if="relatedPost" :to="`/${relatedPost.type}s/${relatedPost.slug}`")
+                        p {{ relatedPost.title }}
+
         slot
+
+        .shadow(v-if="layout === 'single'")
+            exhibitions-sidebar
+        
+        .shadow(v-if="layout === 'single'")
+            events-sidebar
+        
 </template>
 
 <script>
+import exhibitionsSidebar from './exhibitions'
+import eventsSidebar from './events'
 import { sortTypes } from '@/utils/helpers'
 
 export default {
         },
         layout: {
             type: String
+        },
+        related: {
+            type: Object
         }
     },
+    components: {
+        exhibitionsSidebar,
+        eventsSidebar,
+    },
     data() {
         return {
             sortTypes: {

vue-theme/src/pages/single.vue

 
         credits(v-if="type === 'episodes' && post" :post="post")
 
-    sidebar(v-if="sidebar" :type="`${type}`" layout="single")
-        .shadow(v-if="Object.keys(p2pPostsByType).length" v-for="p2pPostType in Object.keys(p2pPostsByType)")
-            h3.t-up related {{ p2pPostType }}s
-            ul
-                li(v-for="relatedPost in p2pPostsByType[p2pPostType]")
-                    router-link(v-if="relatedPost" :to="`/${relatedPost.type}s/${relatedPost.slug}`")
-                        p {{ relatedPost.title }}
+    sidebar(v-if="sidebar" :type="`${type}`" layout="single" :related="p2pPostsByType")
+
 </template>
 
 <script>