feat: adding sort links to sidebar | feat: adding sort routes | bug: fixing link in list vue

vue-theme/src/app.vue

             /* Block Shadow Thing */
             .shadow
                 box-shadow: rgb(34, 36, 37) 0px 0px 4px 0px
-            .b-radius
-                border-radius:5px
                 
             /* Content Pieces */
             .post
             width: 100%
             ul > li
                 padding: 0 $ms
-    footer.main
-        margin: $ms 0 0
 </style>

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

 <template lang="pug">
 aside.sidebar
     section
-        slot
-        .shadow.b-radius(v-if="type === 'artists'")
-            p {{ type }} stuff
-        .shadow.b-radius(v-else)
+        .shadow(v-if="type === 'artists'")
+            h1.t-up sort by
+            ul
+                li(v-for="option in sortOptions")
+                    router-link(:to="`/${type}/${option.replace(' ', '-')}`").t-cap
+                        p {{ option }}
+        .shadow(v-else)
             p {{ type }} sidebar
+        slot
 </template>
 
 <script>
             type: String
         }
     },
-    computed: {},
+    computed: {
+        sortOptions() {
+            let opts = []
+            switch (this.type) {
+                case 'artists':
+                    opts = [
+                        'most recent',
+                        'alphabetized',
+                        'by material',
+                    ]
+                    break
+                case 'shorts':
+                    opts = [
+                        'by artist',
+                        'by material',
+                    ]
+                    break
+                case 'guides':
+                    opts = [
+                        'most recent',
+                        'by episode',
+                        'by material',
+                    ]
+                    break
+            }
+            return opts
+        }
+    },
     mounted() {}
 }
 </script>
 aside.sidebar
     position: sticky
     top: 0
+    ul
+        list-style: none
 </style>

vue-theme/src/index.js

         // List Pages
         { path: '/episodes', component: () => import(/* webpackChunkName: "pages-list" */ './pages/list.vue'), props: { sidebar: false } },
         { path: '/:type', component: () => import(/* webpackChunkName: "pages-list" */ './pages/list.vue'), props: { sidebar: true } },
+        // Sorted List Pages 
+        { path: '/:type/alphabetized', component: () => import(/* webpackChunkName: "pages-list" */ './pages/list.vue'), props: { sidebar: true } },
+        { path: '/:type/most-recent', component: () => import(/* webpackChunkName: "pages-list" */ './pages/list.vue'), props: { sidebar: true } },
+        { path: '/:type/by-material', component: () => import(/* webpackChunkName: "pages-list" */ './pages/list.vue'), props: { sidebar: true } },
+        { path: '/:type/by-episode', component: () => import(/* webpackChunkName: "pages-list" */ './pages/list.vue'), props: { sidebar: true } },
+        { path: '/:type/by-artist', component: () => import(/* webpackChunkName: "pages-list" */ './pages/list.vue'), props: { sidebar: true } },
         // Single Pages
         { path: '/:type/:slug', component: () => import(/* webpackChunkName: "pages-single" */ './pages/single.vue'), props: { sidebar: true } },
     ]

vue-theme/src/pages/index.vue

 <template lang="pug">
 .page--index.f-row.between
     article.f-grow
-        section(v-if="allEpisodesLoaded").shadow.b-radius
+        section(v-if="allEpisodesLoaded").shadow
             router-link(:to="`./episodes`")
                 h4 Episodes
             router-link(:to="`./episodes/${Object.values(allEpisodes)[0].slug}`")
                 p {{ Object.values(allEpisodes)[0].title }}
-        section(v-if="allArtistsLoaded").shadow.b-radius
+        section(v-if="allArtistsLoaded").shadow
             router-link(:to="`./artists`")
                 h4 artists
             router-link(:to="`./artists/${Object.values(allArtists)[0].slug}`")
                 p {{ Object.values(allArtists)[0].title }}
-        section(v-if="allPagesLoaded").shadow.b-radius
+        section(v-if="allPagesLoaded").shadow
             h4 pages
             router-link(:to="`./pages/${Object.values(allPages)[0].slug}`")
                 p {{ Object.values(allPages)[0].title }}
-        section(v-if="allPostsLoaded").shadow.b-radius
+        section(v-if="allPostsLoaded").shadow
             router-link(:to="`./posts`")
                 h4 posts
             router-link(:to="`./posts/${Object.values(allPosts)[0].slug}`")

vue-theme/src/pages/list.vue

     article.f-grow
         header.f-row.center
             h1 {{ type }} list
-        section.shadow.b-radius
+        section.shadow
             h4 {{ type }}
             p {{ Object.values(posts).length }}
             p {{ sidebar }}
-        section(v-for="post in posts").shadow.b-radius
-            router-link(:to="`./${type}/${post.slug}`")
+        section(v-for="post in posts").shadow
+            router-link(:to="`/${type}/${post.slug}`")
                 h4 {{ post.title }}
 
     sidebar(v-if="sidebar" :type="`${type}`")
-        .shadow.b-radius
-            h1 slots stuff
+        .shadow
+            h1.t-up slots stuff
             div
                 p more body whatever
                 p another line of stuff
 
             allPosts: 'allPosts',
             allPostsLoaded: 'allPostsLoaded',
-            
+
             allArtists: 'allArtists',
             allArtistsLoaded: 'allArtistsLoaded',
 

vue-theme/src/pages/single.vue

 <template lang="pug">
 .page--single.f-row.between
-    article.f-grow.shadow.b-radius
+    article.f-grow.shadow
         header
             h1 {{ type }}:{{ $route.params.slug }} single
         section

vue-theme/src/sss/_helpers.sss

     display: flex
     justify-content: center
     align-items: center
-
 .f
     &-row, &-col
         @extend %flexer