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

<template lang="pug">
aside.sidebar
    section
        //- if not single layout with sorting
        .shadow(v-if="shouldShowListSort.includes(type) && layout !== 'single'")
            h3.t-up sort {{ type }}s
            ul.t-up
                li 
                    //- post?type=articles //
                    router-link(v-if="type === 'post' " :to="`/${type}?type=articles`")
                        p in the news
                li 
                    //- post?type=releases //
                    router-link(v-if="type === 'post' " :to="`/${type}?type=releases`")
                        p press releases 
                li 
                    //- event?type=concerts //
                    router-link(v-if="type === 'event' " :to="`/${type}?type=concerts`")
                        p concerts 
                li 
                    //- event?type=openings //
                    router-link(v-if="type === 'event' " :to="`/${type}?type=openings`")
                        p openings 
                li 
                    //- event?type=talks //
                    router-link(v-if="type === 'event' " :to="`/${type}?type=talks`")
                        p talks 
                li 
                    //- event?type=workshops //
                    router-link(v-if="type === 'event' " :to="`/${type}?type=workshops`")
                        p workshops

                    //- by type //
                li(v-for="option in sortOptions")
                    router-link(:to="`/${type}/sorted/${sortTypes[option]}`")
                        p {{ option }} 
                li
                    router-link(v-if="shouldShowDateSort.includes(type) " :to="`/${type}/sorted/by-current-and-upcoming`")
                        p current and upcoming
                li
                    //- router-link(v-if="type === ('post') " :to="`/${type}/`")
                    router-link(v-if="type === ('post') " :to="`/blog`")
                        p by all 

        //- if artist has sorted by-alpha show alpha sets           
        .shadow(v-if="['artist'].includes(type) && layout !== 'single'")
            h3.t-up {{ type }} by alpha 
            ul.t-up
                li.f-row.start.wrap
                    template(v-for="charaSet in charaSets") 
                        router-link(:to="`/${type}/sorted/by-alpha#${charaSet[0]}`")
                            p.alpha {{ charaSet }}
        
        //- if {{type}} has sorted by-material show material sets
        .shadow(v-if="shouldShowMaterialSort.includes(type) && layout !== 'single'")
            h3.t-up {{ type }}s by material
            ul.t-up
                li
                    template(v-for="material in materials") 
                        router-link(:to="`/${type}/sorted/by-material#${material}`")
                            p {{ material }}

        //- if {{type}} has sorted by-episode show episode sets           
        .shadow(v-if="shouldShowEpisodeSort.includes(type) && layout !== 'single'")
            h3.t-up {{ type }}s by episode  
            ul.t-up
                li.f-row.start.wrap
                    template(v-for="episodeSet in episodeSets") 
                        router-link(:to="`/${type}/sorted/by-episode#${episodeSet}`")
                            p {{ episodeSet }} &nbsp;&nbsp;

        //- if {{type}} has sorted by-type show subtype sets 
        .shadow(v-if="shouldShowTypeSort.includes(type) && layout !== 'single'")
            h3.t-up {{ type }}s type  
            ul.t-up
                li
                    template(v-for="subtypeSet in subtypeSets") 
                        router-link(:to="`/${type}/sorted/by-type#${subtypeSet}`")
                            p {{ subtypeSet }}

        //- p2p types and related posts
        .shadow(v-if="layout === 'single' && Object.keys(related).length" v-for="p2pPostType in Object.keys(related)")
            related-sidebar(:posts-by-type="related" :post-type="p2pPostType")

        //- Optional passthrough
        slot

        //- single layout Exhibitions sidebar
        .shadow(v-if="type === 'exhibition'")
            events-sidebar
        //- single layout Events sidebar
        .shadow(v-if="type === 'event'")
            exhibitions-sidebar
        //- single layout type.post sidebar
        .shadow(v-if="type === 'post'")
            exhibitions-sidebar
        .shadow(v-if="type === 'post'")
            events-sidebar
        //- single layout page sidebar
        .shadow(v-if="type === 'page'")
            events-sidebar
        .shadow(v-if="type === 'page'")
            exhibitions-sidebar

</template>

<script>
// related sidebar list
import relatedSidebar from './related'
import exhibitionsSidebar from './exhibitions'
import eventsSidebar from './events'

import { sortTypes, materials } from '@/utils/helpers'

export default {
    props: {
        type: {
            type: String,
        },
        layout: {
            type: String,
        },
        related: {
            type: Object,
        },
    },
    components: {
        exhibitionsSidebar, eventsSidebar, relatedSidebar,
    },
    data() {
        return {
            sortTypes: {
                alphabetized: `${sortTypes.alpha}`,     //:0
                'by material': `${sortTypes.material}`, //:1
                'by artist': `${sortTypes.artist}`,     //:2
                'by episode': `${sortTypes.episode}`,   //:3
                'by type': `${sortTypes.subtype}`,      //:4
                'by past': `${sortTypes.past}`,         //:5
                // subtype: 'by-type',
            },
            charaSets: [
                '9', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 
                'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z'
            ],
            episodeSets: [
                'inspiration', 'home', 'jewelry', 'harmony', 'storytellers', 
                'democracy', 'identity', 'quilts', 'visionaries', 'california', 
                'neighbors', 'borders', 'nature', 'teachers', 'music', 
                'celebration', 'service', 'industry', 'holiday', 'forge', 
                'crossroads', 'threads', 'family', 'messages', 'process', 
                'origins', 'community', 'landscape', 'memory' 
            ],
            subtypeSets: [
                'schools', 'museums', 'collectors', 'organizations', 'galleries'  
            ],
            materials: materials,
            shouldShowListSort: [
                'artist', 'exhibition', 'event', 'short',
                'technique', 'guide', 'object', 'publication', 'post'
            ],
            shouldShowMaterialSort: [
                'artist', 'short', 'technique', 
                'guide', 'object', 'publication',
            ],
            shouldShowEpisodeSort: [
                'artist', 'short', 'technique', 'guide'
                
            ],
            shouldShowAlphaSort: [
                'artist'
            ],
            shouldShowDateSort: [
                'exhibition', 'event'
            ],
            shouldShowTypeSort: [
                'artist'
            ]
        }
    },
    computed: {
        sortOptions() {
            let opts = []
            switch (this.type) {
                case 'artist':
                    opts = [
                        Object.keys(this.sortTypes)[0],
                        Object.keys(this.sortTypes)[1],
                        Object.keys(this.sortTypes)[3],
                        Object.keys(this.sortTypes)[4],
                        // `by ${this.type} type`,
                    ]
                    break
                case 'exhibition':
                    opts = [

                        Object.keys(this.sortTypes)[5],
                    ]
                    break
                case 'event':
                    opts = [

                        Object.keys(this.sortTypes)[5],
                    ]
                    break
                case 'post':
                    opts = [
                        Object.keys(this.sortTypes)[4],
                    ]
                    break
                case 'short':
                    opts = [
                        Object.keys(this.sortTypes)[3],
                        Object.keys(this.sortTypes)[1],
                    ]
                    break
                case 'guide':
                    opts = [
                        Object.keys(this.sortTypes)[3],
                        Object.keys(this.sortTypes)[1],
                    ]
                    break
                case 'object':
                    opts = [
                        Object.keys(this.sortTypes)[1],
                    ]
                    break
                case 'publication':
                    opts = [
                        Object.keys(this.sortTypes)[1],
                    ]
                    break
                case 'technique':
                    opts = [
                        Object.keys(this.sortTypes)[3],
                        Object.keys(this.sortTypes)[1],
                    ]
                    break
            }
            return opts
        },
    },
}
</script>

<style lang="postcss">
// prettier-ignore
@import '../../sss/variables.sss'
@import '../../sss/theme.sss'
aside.sidebar
    /* need to solve for mobile as the sticky creates scroll issues */
    /* position: sticky */
    top: 40px
    width: 100%
    font-size: x-small
    p, h3
        margin: 0
        padding: 0 0 $ms--4 0
        &.date 
            font-size: $ms--1

    > section
        > *
            padding: $ms-0
            margin: 0 0 $ms-0 0
            display: table-cell
        > .post
            /* background-color: blue */
    ul
        list-style: none  
        display: flex
        flex-direction: column
        flex-wrap: wrap 
        li
            /* padding: 0 0 $ms-0 0 */
            img
                display: none
                padding: $ms-0 0 $ms--4 0
            p.alpha 
                padding: 0 $ms--4

    .shadow
        background-color: white


/* width larger than $medium  */
@media (min-width: $medium)
    aside.sidebar
        position: sticky
        min-width: 25%
        width: 25%
        font-size: revert
        > section 
            > * 
                display: inherit 
        ul
            flex-direction: column
            li 
                img
                    display: block  
                    width: 100%

</style>