Display person avatar and make it clickable

aleksis/core/assets/components/person/AvatarClickBox.vue

+<template>
+  <v-dialog
+    v-model="overlay"
+    max-width="fit-content"
+  >
+    <template v-slot:activator="{ on, attrs }">
+      <v-card class="rounded-circle">
+        <v-responsive :aspect-ratio="1"
+              v-bind="attrs"
+              v-on="on">
+          <AvatarContent :id="id" class="rounded-circle"/>
+        </v-responsive>
+      </v-card>
+    </template>
+    <v-sheet class="d-flex justify-center align-center flex-column text-center transparent">
+      <AvatarContent :id="id" contain class="inDialog"/>
+    </v-sheet>
+  </v-dialog>
+</template>
+
+<script>
+import AvatarContent from "./AvatarContent.vue";
+
+export default {
+  name: "AvatarClickBox",
+  components: {AvatarContent},
+  data: () => ({
+    overlay: false,
+  }),
+  props: {
+    id: {
+      type: String,
+      required: false,
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .inDialog {
+    height: 80vmin;
+    width: 80vmin;
+    aspect-ratio: 1;
+  }
+</style>

aleksis/core/assets/components/person/PersonOverview.vue

@@ -17,6 +17,20 @@
         </v-row>
       </template>
       <template v-else-if="data && data.person">
+        <v-row>
+          <v-spacer />
+          <v-col
+            cols="6"
+            sm="4"
+            md="3"
+            lg="2"
+            max-width="220px"
+          >
+            <AvatarClickBox :id="id"/>
+          </v-col>
+          <v-spacer />
+        </v-row>
+
         <h1 class="text-center">{{ data.person.firstName }} {{ data.person.lastName }}
           <span v-if="data.person.username" class="text-h5 grey--text text--darken-2">
             {{ data.person.username }}
@@ -181,12 +195,13 @@
 </template>
 
 <script>
+import AvatarClickBox from "./AvatarClickBox.vue";
 import GroupList from "../group/GroupList.vue";
 import PersonList from "./PersonList.vue";
 
 export default {
   name: "PersonOverview",
-  components: {GroupList, PersonList},
+  components: {AvatarClickBox, GroupList, PersonList},
   props: {
     id: {
       type: String,