✨ Image cropper and account settings

src/layouts/master.vue

@@ -54,27 +54,7 @@
             <v-avatar icon="mdi-account-circle" :image="id.userinfo.data?.picture" />
           </template>
           <template #append>
-            <v-menu v-if="id.userinfo.isLoggedIn">
-              <template #activator="{ props }">
-                <v-btn v-bind="props" icon="mdi-menu-down" size="small" variant="text" />
-              </template>
-
-              <v-list density="compact">
-                <v-list-item
-                  title="Sign out"
-                  prepend-icon="mdi-logout-variant"
-                  @click="signout"
-                />
-                <v-list-item
-                  title="Solarpass"
-                  prepend-icon="mdi-passport-biometric"
-                  target="_blank"
-                  :href="passportUrl"
-                />
-              </v-list>
-            </v-menu>
-
-            <v-btn v-else icon="mdi-login-variant" size="small" variant="text" :to="{ name: 'auth.sign-in' }" />
+            <user-menu />
           </template>
         </v-list-item>
       </v-list>
@@ -110,6 +90,7 @@ import { useUI } from "@/stores/ui"
 import RealmList from "@/components/realms/RealmList.vue"
 import NotificationList from "@/components/users/NotificationList.vue"
 import ChannelList from "@/components/chat/channels/ChannelList.vue"
+import UserMenu from "@/components/users/UserMenu.vue"
 
 const ui = useUI()
 const expanded = ref<string[]>(["channels"])
@@ -141,21 +122,9 @@ const nickname = computed(() => {
 
 id.readProfiles()
 
-const meta = useWellKnown()
-
-const passportUrl = computed(() => {
-  return meta.wellKnown?.components?.identity
-})
-
-meta.readWellKnown()
+useWellKnown().readWellKnown()
 
 const drawerOpen = ref(true)
 const drawerMini = ref(false)
-
-async function signout() {
-  signoutAccount().then(() => {
-    window.location.reload()
-  })
-}
 </script>
 

src/layouts/settings.vue

@@ -0,0 +1,46 @@
+<template>
+  <v-container class="wrapper pt-6 px-6">
+    <div class="content">
+      <router-view />
+    </div>
+
+    <div class="aside-nav max-md:order-first">
+      <v-card prepend-icon="mdi-cog" title="Settings">
+        <v-list density="comfortable">
+          <v-list-item title="Personalize" prepend-icon="mdi-card-bulleted-outline" :to="{ name: 'settings.account.personalize' }" />
+          <v-list-item title="Personal Page" prepend-icon="mdi-sitemap" :to="{ name: 'settings.account.personal-page' }" />
+
+          <v-divider class="border-[#000] my-2" />
+
+          <v-list-item title="Solarpass" prepend-icon="mdi-passport-biometric" append-icon="mdi-launch"  target="_blank" :href="passportUrl" />
+        </v-list>
+      </v-card>
+    </div>
+  </v-container>
+</template>
+
+<script setup lang="ts">
+import { useWellKnown } from "@/stores/wellKnown"
+import { computed } from "vue"
+
+const meta = useWellKnown()
+
+const passportUrl = computed(() => {
+  return meta.wellKnown?.components?.identity
+})
+</script>
+
+<style scoped>
+.wrapper {
+  display: grid;
+  grid-template-columns: 2fr 1fr;
+
+  gap: 0.75rem;
+}
+
+@media (max-width: 768px) {
+  .wrapper {
+    grid-template-columns: 1fr;
+  }
+}
+</style>