From 8bc1df9b8e813f115f7de258feb28c127e3ad5ca Mon Sep 17 00:00:00 2001
From: Liyas Thomas <liyascthomas@gmail.com>
Date: Tue, 21 Jan 2020 11:47:47 +0530
Subject: [PATCH] :sparkles: Show logged in user image

---
 assets/css/fonts.scss |  1 +
 layouts/default.vue   | 38 +++++++++++++++++++++++++++++++++++---
 2 files changed, 36 insertions(+), 3 deletions(-)

diff --git a/assets/css/fonts.scss b/assets/css/fonts.scss
index 313b4b58a..0c714f199 100644
--- a/assets/css/fonts.scss
+++ b/assets/css/fonts.scss
@@ -27,6 +27,7 @@
   -webkit-font-feature-settings: "liga";
   -webkit-font-smoothing: antialiased;
   font-feature-settings: "liga";
+  border-radius: 50%;
 }
 
 /* poppins-500 - latin */
diff --git a/layouts/default.vue b/layouts/default.vue
index b22777ccb..0f3561ee8 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -290,9 +290,41 @@
                 </button>
                 <login v-if="!store.currentUser" />
                 <span v-if="store.currentUser">
-                  <button class="icon" @click="logout" v-tooltip="$t('logout')">
-                    <i class="material-icons">exit_to_app</i>
-                  </button>
+                  <v-popover>
+                    <button
+                      class="icon"
+                      v-tooltip="
+                        (store.currentUser.displayName || '<label><i>Name not found</i></label>') +
+                          '<br>' +
+                          (store.currentUser.email || '<label><i>Email not found</i></label>')
+                      "
+                    >
+                      <img
+                        v-if="store.currentUser.photoURL"
+                        :src="store.currentUser.photoURL"
+                        class="material-icons"
+                      />
+                      <i v-else class="material-icons">account_circle</i>
+                    </button>
+                    <template slot="popover">
+                      <div>
+                        <nuxt-link :to="localePath('settings')" v-close-popover>
+                          <button class="icon">
+                            <i class="material-icons">settings</i>
+                            <span>
+                              {{ $t("settings") }}
+                            </span>
+                          </button>
+                        </nuxt-link>
+                      </div>
+                      <div>
+                        <button class="icon" @click="logout" v-close-popover>
+                          <i class="material-icons">exit_to_app</i>
+                          <span>{{ $t("logout") }}</span>
+                        </button>
+                      </div>
+                    </template>
+                  </v-popover>
                 </span>
                 <v-popover>
                   <button class="icon" v-tooltip="$t('more')">