authentication

src/layout/AppProfileMenu.vue

@@ -0,0 +1,21 @@
+<template>
+    <div class="config-panel hidden">
+        <div class="config-panel-content">
+            <span class="config-panel-label">Welcome </span>
+            <span v-if="user">
+                {{ user.name + " " + user.surname }}
+            </span>    
+                <button @click="auth.logout()" class="p-button p-button-danger p-button-outlined">Logout</button>
+        </div>
+    </div>
+</template>
+
+<script setup>
+
+import { useAuth } from '@websanova/vue-auth/src/v3.js';
+import { computed } from 'vue';
+
+const auth = useAuth();
+const user = computed(() => auth.user());
+
+</script>

src/layout/AppTopbar.vue

@@ -1,6 +1,10 @@
 <script setup>
 import { useLayout } from '@/layout/composables/layout';
+import { useAuth } from '@websanova/vue-auth/src/v3.js';
 import AppConfigurator from './AppConfigurator.vue';
+import AppProfileMenu from './AppProfileMenu.vue';
+const auth     = useAuth();
+
 
 const { onMenuToggle, toggleDarkMode, isDarkTheme } = useLayout();
 </script>
@@ -60,18 +64,15 @@ const { onMenuToggle, toggleDarkMode, isDarkTheme } = useLayout();
 
             <div class="layout-topbar-menu hidden lg:block">
                 <div class="layout-topbar-menu-content">
-                    <button type="button" class="layout-topbar-action">
-                        <i class="pi pi-calendar"></i>
-                        <span>Calendar</span>
-                    </button>
-                    <button type="button" class="layout-topbar-action">
-                        <i class="pi pi-inbox"></i>
-                        <span>Messages</span>
-                    </button>
-                    <button type="button" class="layout-topbar-action">
-                        <i class="pi pi-user"></i>
-                        <span>Profile</span>
+                    <button
+                        v-styleclass="{ selector: '@next', enterFromClass: 'hidden', enterActiveClass: 'animate-scalein', leaveToClass: 'hidden', leaveActiveClass: 'animate-fadeout', hideOnOutsideClick: true }"
+                        type="button"
+                        class="layout-topbar-action "
+                    >
+                    <i class="pi pi-user"></i>
                     </button>
+                    <AppProfileMenu />
+
                 </div>
             </div>
         </div>