Cleaner request formatting

pages/dashboard/projects.vue

@@ -7,6 +7,16 @@
             <ModIcon />
             My mods
           </nuxt-link>
+          <nuxt-link
+            v-if="
+              $auth.user.role === 'admin' || $auth.user.role === 'moderator'
+            "
+            :to="'/dashboard/moderation'"
+            class="tab last"
+          >
+            <ModerationIcon />
+            Moderation
+          </nuxt-link>
         </div>
         <client-only>
           <EthicalAd type="image" />
@@ -49,12 +59,14 @@ import EthicalAd from '@/components/EthicalAd'
 import ModCard from '@/components/ProjectCard'
 
 import ModIcon from '~/assets/images/sidebar/mod.svg?inline'
+import ModerationIcon from '~/assets/images/sidebar/admin.svg?inline'
 
 export default {
   components: {
     EthicalAd,
     ModCard,
     ModIcon,
+    ModerationIcon,
   },
   async asyncData(data) {
     const config = {
@@ -92,86 +104,6 @@ export default {
   }
 }
 
-table {
-  border-collapse: collapse;
-  table-layout: fixed;
-  width: 100%;
-  margin-bottom: var(--spacing-card-md);
-  background: var(--color-raised-bg);
-  border-radius: var(--size-rounded-card);
-
-  * {
-    text-align: left;
-  }
-
-  tr:not(:last-child),
-  tr:first-child {
-    th,
-    td {
-      border-bottom: 1px solid var(--color-divider);
-    }
-  }
-
-  th,
-  td {
-    &:first-child {
-      text-align: center;
-      width: 7%;
-    }
-
-    &:nth-child(2) {
-      padding-left: 0;
-      width: 30%;
-    }
-  }
-
-  th {
-    color: var(--color-heading);
-    font-size: 0.8rem;
-    letter-spacing: 0.02rem;
-    margin-bottom: 0.5rem;
-    margin-top: 1.5rem;
-    padding: 1rem 1rem;
-    text-transform: uppercase;
-  }
-
-  td {
-    padding: 0.75rem;
-
-    img {
-      height: 3rem;
-      width: 3rem;
-    }
-  }
-}
-
-@media screen and (max-width: 550px) {
-  th,
-  td {
-    &:nth-child(1) {
-      img {
-        height: 2rem;
-        width: 2rem;
-      }
-    }
-    &:nth-child(3) {
-      display: none;
-    }
-  }
-}
-
-@media screen and (max-width: 850px) {
-  th,
-  td {
-    &:nth-child(2) {
-      width: 25% !important;
-    }
-    &:nth-child(6) {
-      display: none;
-    }
-  }
-}
-
 .mod-name {
   font-weight: bold;
 }