fuckery with the profile

src/components/Header.vue

@@ -6,22 +6,47 @@
         <v-btn icon="mdi-help-box" />
 
         <v-btn icon @click="toggleTheme">
-                <v-icon>
-                    {{ theme.global.current.value.dark ? 'mdi-weather-sunny' : 'mdi-weather-night' }}
-                </v-icon>
-            </v-btn>
+            <v-icon>
+                {{ theme.global.current.value.dark ? 'mdi-weather-sunny' : 'mdi-weather-night' }}
+            </v-icon>
+        </v-btn>
+        <template>
+            <v-container style="height: 300px" fluid>
+                <v-row class="justify-center">
+                    <v-menu min-width="200px">
+                        <template v-slot:activator="{ props }">
+                            <v-btn icon v-bind="props">
+                                <v-avatar color="brown" size="large">
+                                    <span class="text-headline-small">{{ fakeUserInitials }}</span>
+                                </v-avatar>
+                            </v-btn>
+                        </template>
+                        <v-card>
+                            <v-card-text>
+                                <div class="mx-auto text-center">
+                                    <v-avatar color="brown">
+                                        <span class="text-headline-small">fakeUserInitials</span>
+                                    </v-avatar>
+                                    <h3 class="my-0">{{fakeUser.firstName + ' ' + fakeUser.lastName}}</h3>
+                                    <v-divider class="my-3" />
+                                    <v-btn variant="text" rounded>Profile</v-btn>
+                                    <v-btn variant="text" rounded>Sign out</v-btn>
+                                </div>
+                            </v-card-text>
+                        </v-card>
+                    </v-menu>
+                </v-row>
+            </v-container>
+        </template>
             <v-menu>
-                <template #activator="{ props }">
-                <v-btn icon v-bind="props">
-                    <v-avatar size="32" icon="mdi-account-circle">
-                        <!--<img src=""-->
-                    </v-avatar>
-                </v-btn>
+                <template v-slot:activator="{ props }">
+                    <v-btn icon v-bind="props">
+                        <v-avatar size="32" icon="mdi-account-circle" />
+                    </v-btn>
                 </template>
-
                 <v-list>
-                <v-list-item title="Profile" to="/profile"/>
-                <v-list-item title="Sign out" />
+                    <v-list-item title="Profile" to="/profile"/>
+                    <v-list-item title="Sign out" />
                 </v-list>
             </v-menu>
 
@@ -109,9 +134,10 @@
 </style>
 
 <script setup>
-    import { ref, watch } from 'vue'
+    import { ref, watch, computed } from 'vue'
     import { useTheme } from 'vuetify'
 
+    /* Navigation Items */
     const pexItems = [
         { title: 'Dashboard', to: '/dashboard', icon: 'mdi-view-dashboard' },
         { title: 'Calendar', to: '/calendar', icon: 'mdi-calendar' },
@@ -138,6 +164,17 @@
         { title: 'Settings', to: '/settings', icon: 'mdi-cog' }
     ]
 
+    /* Fake User */
+    const fakeUser = {
+        firstName: 'John',
+        lastName: 'Doe'
+    }
+     
+    const fakeUserInitials = computed(() => {
+        return (fakeUser.firstName.value[0] + fakeUser.lastName.value[0]).toUpperCase()
+    })
+
+    /* Miscellaneous shit */
     const theme = useTheme()
     function toggleTheme() {
         theme.global.name.value = theme.global.current.value.dark ? 'light' : 'dark'