Implement UserCard

userfrosting · Apr 12, 2024 · c7ca8a8 · c7ca8a8
1 parent d16f75f
commit c7ca8a8
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 21 deletions.
diff --git a/app/assets/App.vue b/app/assets/App.vue
@@ -1,7 +1,8 @@
 <script setup>
 import { MainContent } from '@userfrosting/theme-pink-cupcake/Content'
-import { NavBar } from '@userfrosting/theme-pink-cupcake/NavBar'
-import { NavBarItem } from '@userfrosting/theme-pink-cupcake/NavBar'
+import { NavBar, NavBarItem, NavBarUserCard, NavBarUserCardButton } from '@userfrosting/theme-pink-cupcake/NavBar'
+import { useAuthStore } from './stores/auth.js'
+const auth = useAuthStore()
 </script>
 
 <template>
@@ -10,6 +11,9 @@ import { NavBarItem } from '@userfrosting/theme-pink-cupcake/NavBar'
         <NavBarItem to="/about" label="About" />
         <NavBarItem to="/resources" label="Api Test" />
         <NavBarItem to="/auth" label="Login Test" />
+        <NavBarUserCard v-if="auth.auth" :username="auth.user.full_name" :avatar="auth.user.avatar" :meta="auth.user.user_name">
+            <NavBarUserCardButton label="Logout" @click="auth.logout()" />
+        </NavBarUserCard>
     </NavBar>
     <MainContent>
         <RouterView />

diff --git a/package-lock.json b/package-lock.json