Added compact sidebar. Added tag sections and posters.

assets/components/tags/tags.vue

@@ -1,11 +1,18 @@
 <template>
     <div class="tags">
-        <div class="tiles">
-            <Tag
-                v-for="tag in popularTags"
-                :key="`tag-${tag.id}`"
-                :tag="tag"
-            />
+        <div
+            v-for="(tags, category) in categories"
+            :key="category"
+        >
+            <h3 class="heading">{{ category }}</h3>
+
+            <div class="tiles">
+                <Tag
+                    v-for="tag in tags"
+                    :key="`tag-${tag.id}`"
+                    :tag="tag"
+                />
+            </div>
         </div>
     </div>
 </template>
@@ -14,63 +21,76 @@
 import Tag from '../tile/tag.vue';
 
 async function mounted() {
-    const tags = await this.$store.dispatch('fetchTags', {
-        slugs: [
-            'airtight',
+    const tagSlugsByCategory = {
+        popular: [
             'anal',
-            'asian',
-            'blonde',
-            'blowjob',
-            'brunette',
-            'caucasian',
-            'creampie',
-            'deepthroat',
-            'double-penetration',
-            'ebony',
-            'facefucking',
-            'facial',
-            'gangbang',
-            'interracial',
-            'latina',
             'lesbian',
-            'maid',
             'mff',
             'mfm',
-            'orgy',
-            'redhead',
-            'schoolgirl',
             'teen',
+            'milf',
+            'orgy',
+            'gangbang',
+            'double-penetration',
+            'airtight',
+            'facial',
+            'creampie',
+            'blowjob',
+            'interracial',
         ],
+        extreme: [
+            'double-anal',
+            'double-vaginal',
+            'da-tp',
+            'dv-tp',
+        ],
+        oral: [
+            'deepthroat',
+            'facefucking',
+            'double-blowjob',
+            'blowbang',
+            'pussy-eating',
+            'ass-eating',
+            'ass-to-mouth',
+        ],
+        cumshot: [
+            'facial',
+            'bukkake',
+            'creampie',
+            'anal-creampie',
+            'cum-in-mouth',
+        ],
+        appearance: [
+            'asian',
+            'ebony',
+            'latina',
+            'caucasian',
+            'blonde',
+            'brunette',
+            'redhead',
+        ],
+        roleplay: [
+            'family',
+            'schoolgirl',
+            'maid',
+        ],
+        tricks: [
+            'gaping',
+        ],
+    };
+
+    const tags = await this.$store.dispatch('fetchTags', {
+        slugs: Object.values(tagSlugsByCategory).flat(),
     });
 
     const tagsBySlug = tags.reduce((acc, tag) => ({ ...acc, [tag.slug]: tag }), {});
 
-    this.popularTags = [
-        'anal',
-        'teen',
-        'lesbian',
-        'mff',
-        'mfm',
-        'orgy',
-        'double-penetration',
-        'gangbang',
-        'airtight',
-        'creampie',
-        'facial',
-        'interracial',
-        'blowjob',
-        'deepthroat',
-        'facefucking',
-        'asian',
-        'ebony',
-        'latina',
-        'caucasian',
-        'blonde',
-        'brunette',
-        'redhead',
-        'schoolgirl',
-        'maid',
-    ].map(tagSlug => tagsBySlug[tagSlug]);
+    this.categories = Object.entries(tagSlugsByCategory).reduce((acc, [category, tagSlugs]) => ({
+        ...acc,
+        [category]: tagSlugs.map(tagSlug => tagsBySlug[tagSlug]),
+    }), {});
+
+    console.log(this.categories);
 
     this.pageTitle = 'Tags';
 }
@@ -81,7 +101,7 @@ export default {
     },
     data() {
         return {
-            popularTags: [],
+            categories: {},
             pageTitle: null,
         };
     },
@@ -99,11 +119,13 @@ export default {
 .tiles {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(20rem, .25fr));
-    grid-gap: 2rem;
+    grid-gap: 1rem;
+    margin: 0 0 1.5rem 0;
 }
 
 .heading {
     font-size: 1.3rem;
+    text-transform: capitalize;
 }
 
 @media(max-width: $breakpoint3) {