Add user context menu

layouts/default.vue

@@ -122,9 +122,8 @@
         <div class="disclosure">
           <span>
             Modrinth is open source software. You may view the source code at
-            <a href="https://github.com/modrinth/knossos"
+            our
-              >our GitHub Repository</a
+            <a href="https://github.com/modrinth/knossos">GitHub Repository</a>.
-            >.
           </span>
         </div>
         <section class="user-actions">
@@ -138,9 +137,26 @@
             >Log In</a
           >
           <div v-if="this.$auth.loggedIn" class="avatar">
-            <img :src="this.$auth.user.avatar_url" alt="avatar" />
+            <img
+              :src="this.$auth.user.avatar_url"
+              alt="avatar"
+              @click="showPopup = !showPopup"
+            />
             <span> {{ this.$auth.user.username }} </span>
           </div>
+          <div v-if="showPopup" class="user-actions-popup">
+            <div class="popup-inner">
+              <p>
+                Modrinth ID: <strong>{{ this.$auth.user.id }}</strong>
+              </p>
+              <hr />
+              <p>My profile</p>
+              <p>My teams</p>
+              <hr />
+              <p>Settings</p>
+              <p @click="logout">Logout</p>
+            </div>
+          </div>
           <div v-if="this.$auth.loggedIn" class="notifications">
             <svg
               viewBox="0 0 24 24"
@@ -218,6 +234,7 @@ export default {
   data() {
     return {
       theme: 'light',
+      showPopup: false,
     }
   },
   created() {
@@ -247,6 +264,10 @@ export default {
       document.body.style.overflow =
         document.body.style.overflow !== 'hidden' ? 'hidden' : 'auto'
     },
+    logout() {
+      this.$auth.setToken('local', false)
+      this.$router.go()
+    },
   },
 }
 </script>
@@ -412,6 +433,7 @@ export default {
 
         .avatar {
           img {
+            cursor: pointer;
             border-radius: 50%;
             height: 2rem;
             margin-right: 0.5rem;
@@ -427,6 +449,50 @@ export default {
           background-color: var(--color-grey-1);
           margin-left: 2.5rem;
         }
+
+        .user-actions-popup {
+          position: relative;
+          display: inline-block;
+
+          .popup-inner {
+            width: 140px;
+            border: 2px var(--color-grey-2) solid;
+            background-color: var(--color-bg);
+            color: var(--color-grey-5);
+            font-size: 15px;
+            padding: 8px 0;
+            position: absolute;
+            z-index: 1;
+            margin-bottom: 20px;
+            bottom: 500%;
+            margin-left: -165px;
+
+            hr {
+              color: var(--color-grey-2);
+              height: 1px;
+            }
+            p {
+              cursor: pointer;
+              padding: 8px;
+              margin: 0;
+              &:hover,
+              &:focus {
+                color: var(--color-text-inverted);
+                background-color: var(--color-brand);
+              }
+            }
+          }
+          .popup-inner::after {
+            content: '';
+            position: absolute;
+            top: 100%;
+            right: 90%;
+            border-width: 7px;
+            border-style: solid;
+            border-color: var(--color-grey-2) transparent transparent
+              transparent;
+          }
+        }
       }
     }
 

nuxt.config.js

@@ -27,12 +27,12 @@ export default {
       {
         hid: 'og-title',
         property: 'og:title',
-        content: 'Modrinth - Modern modding platform for all',
+        content: 'Open source modding platform',
       },
       {
         hid: 'og-site-name',
         property: 'og:site_name',
-        content: 'Modrinth.com',
+        content: 'Modrinth',
       },
       {
         hid: 'og-image',
@@ -70,7 +70,7 @@ export default {
       {
         hid: 'twitter-title',
         property: 'twitter:title',
-        content: 'Modrinth.com',
+        content: 'Modrinth',
       },
     ],
     link: [

pages/create/mod.vue

@@ -0,0 +1,11 @@
+<template>
+  <div class="content">
+    <h2>Create Mod</h2>
+  </div>
+</template>
+
+<script>
+export default {}
+</script>
+
+<style lang="scss"></style>

pages/dashboard/projects.vue

@@ -4,7 +4,9 @@
 
     <div class="section-header">
       <h3>Mods</h3>
-      <button>Create a new mod</button>
+      <nuxt-link class="create-button" to="/create/mod"
+        >Create a new mod</nuxt-link
+      >
     </div>
     <table>
       <thead>
@@ -40,35 +42,6 @@
         </tr>
       </tbody>
     </table>
-
-    <div class="section-header">
-      <h3>Modpacks</h3>
-      <button>Create a new modpack</button>
-    </div>
-    <table>
-      <thead>
-        <tr>
-          <th></th>
-          <th>Name</th>
-          <th>Role</th>
-          <th>Status</th>
-          <th>Downloads</th>
-          <th>Last updated</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr>
-          <td>
-            <img class="rounded-md" src="~/assets/images/aof-mini.png" />
-          </td>
-          <td>All of Fabric Mini</td>
-          <td>Contributor</td>
-          <td><span class="badge red">Abandoned</span></td>
-          <td>357</td>
-          <td>Apr 1, 2020</td>
-        </tr>
-      </tbody>
-    </table>
   </div>
 </template>
 
@@ -82,6 +55,14 @@
   }
 }
 
+.create-button {
+  margin: auto 0;
+  padding: 4px 20px;
+  border-radius: 5px;
+  color: var(--color-grey-5);
+  background-color: var(--color-grey-1);
+}
+
 table {
   background: var(--color-bg);
   border-collapse: collapse;