diff --git a/movie-group-8/src/components/Navbar.vue b/movie-group-8/src/components/Navbar.vue index 50e2353bc8aee589ef65ef36c9254be32039e9cc..5ae04011c21832e5f613c42d75b1f64557a642b5 100644 --- a/movie-group-8/src/components/Navbar.vue +++ b/movie-group-8/src/components/Navbar.vue @@ -48,7 +48,7 @@ <Menu as="div" class="relative" v-if="isLoggedIn"> <div> <MenuButton class="flex rounded-full bg-gray-800 text-sm focus:ring-1 focus:ring-white focus:ring-offset-2"> - <img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" /> + <img class="h-8 w-8 rounded-full" :src="userPhotoURL" alt="User Avatar" /> </MenuButton> </div> <transition enter-active-class="transition ease-out duration-100" enter-from-class="transform opacity-0 scale-95" enter-to-class="transform opacity-100 scale-100" leave-active-class="transition ease-in duration-75" leave-from-class="transform opacity-100 scale-100" leave-to-class="transform opacity-0 scale-95"> @@ -81,6 +81,7 @@ const auth = getAuth(); const route = useRoute(); const router = useRouter(); const isLoggedIn = ref(false); +const userPhotoURL = ref(''); const navigation = ref([ { name: 'Films', href: '/films', authRequired: true }, @@ -103,6 +104,11 @@ const filteredNavigation = computed(() => { onMounted(() => { onAuthStateChanged(auth, (user) => { isLoggedIn.value = !!user; // Sets to true if user exists, false otherwise + if(user && user.photoURL) { + userPhotoURL.value = user.photoURL; + } else { + userPhotoURL.value = 'https://static.vecteezy.com/system/resources/previews/009/292/244/non_2x/default-avatar-icon-of-social-media-user-vector.jpg'; + } }); });