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

<template lang="pug">
aside.sidebar
    section
        .shadow(v-if="type === 'artists' && layout !== 'single'")
            h1.t-up sort {{ type }} by
            ul
                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 {
    props: {
        type: {
            type: String
        },
        layout: {
            type: String
        },
        related: {
            type: Object
        }
    },
    components: {
        exhibitionsSidebar,
        eventsSidebar,
    },
    data() {
        return {
            sortTypes: {
                'most recent': `${sortTypes.recent}`,
                'alphabetized': `${sortTypes.alpha}`,
                'by material': `${sortTypes.material}`,
                'by artist': `${sortTypes.artist}`,
                'by episode': `${sortTypes.episode}`,
            }
        }
    },
    computed: {
        sortOptions() {
            let opts = []
            switch (this.type) {
                case 'artists':
                    opts = [
                        Object.keys(this.sortTypes)[0],
                        Object.keys(this.sortTypes)[1],
                        Object.keys(this.sortTypes)[2],
                    ]
                    break
                case 'shorts':
                    opts = [
                        Object.keys(this.sortTypes)[3],
                        Object.keys(this.sortTypes)[2],
                    ]
                    break
                case 'guides':
                    opts = [
                        Object.keys(this.sortTypes)[0],
                        Object.keys(this.sortTypes)[4],
                        Object.keys(this.sortTypes)[2],
                    ]
                    break
            }
            return opts
        }
    }
}
</script>

<style lang="postcss">
aside.sidebar
    position: sticky
    top: 65px
    ul
        list-style: none
</style>