✨ Proper user login

app/layouts/default.vue

@@ -1,6 +1,6 @@
 <template>
   <v-app :theme="isDark ? 'dark' : 'light'">
-    <v-app-bar flat>
+    <v-app-bar flat class="app-bar-blur">
       <v-container class="mx-auto d-flex align-center justify-center">
         <v-btn
           v-for="link in links"
@@ -13,9 +13,13 @@
 
         <v-spacer />
 
-        <v-responsive max-width="160">
-          <v-avatar class="me-4" color="grey-darken-1" size="32" />
-        </v-responsive>
+        <v-avatar
+          class="me-4"
+          color="grey-darken-1"
+          size="32"
+          icon="mdi-account"
+          :image="`${apiBase}/drive/files/${user?.profile.picture?.id}`"
+        />
       </v-container>
     </v-app-bar>
 
@@ -29,6 +33,9 @@
 import { useCustomTheme } from "~/composables/useCustomTheme"
 import type { NavLink } from "~/types/navlink"
 
+const apiBase = useSolarNetworkUrl()
+
+const { user } = useUserStore()
 const { isDark } = useCustomTheme()
 
 const links: NavLink[] = [
@@ -39,3 +46,22 @@ const links: NavLink[] = [
   }
 ]
 </script>
+
+<style scoped>
+.app-bar-blur {
+  -webkit-mask-image: linear-gradient(
+    to bottom,
+    rgba(0, 0, 0, 1) 40%,
+    rgba(0, 0, 0, 0.5) 65%,
+    rgba(0, 0, 0, 0) 100%
+  );
+  mask-image: linear-gradient(
+    to bottom,
+    rgba(0, 0, 0, 1) 40%,
+    rgba(0, 0, 0, 0.5) 65%,
+    rgba(0, 0, 0, 0) 100%
+  );
+  mask-repeat: no-repeat;
+  mask-size: 100%;
+}
+</style>