UI upgrades

web/src/components/layout/PublicAppBar.vue

@@ -7,13 +7,19 @@
       class="main-head pl-2"
     >
       <div class="mr-3">
-        <PublicAppLogo
-          to="/"
-          :animated="isHomePage"
-        />
+        <PublicAppLogo to="/" />
       </div>
 
       <v-spacer />
+
+      <ProfileMenu v-if="isAuthenticated" />
+      <v-btn
+        v-else
+        color="primary"
+        variant="tonal"
+        text="Sign in"
+        :to="{ name: 'SignInPage' }"
+      />
     </v-app-bar>
   </div>
   <div v-else>
@@ -31,6 +37,15 @@
       </div>
 
       <v-spacer />
+
+      <ProfileMenu v-if="isAuthenticated" />
+      <v-btn
+        v-else
+        color="primary"
+        variant="tonal"
+        text="Sign in"
+        :to="{ name: 'SignInPage' }"
+      />
     </v-app-bar>
   </div>
 </template>
@@ -39,11 +54,14 @@
 import { computed } from "vue"
 import { useRoute } from "vue-router"
 import { useDisplay } from "vuetify"
+import { useAuth0 } from "@auth0/auth0-vue"
 
+import ProfileMenu from "@/components/layout/ProfileMenu.vue"
 import PublicAppLogo from "@/components/common/PublicAppLogo.vue"
 
 const route = useRoute()
 const isHomePage = computed(() => route.name === "HomePage")
 
 const { mobile } = useDisplay()
+const { isAuthenticated } = useAuth0()
 </script>