Add pinia dependency for state management

src/layout/AppLayout.vue

@@ -1,6 +1,7 @@
 <script setup>
 import { useLayout } from '@/layout/composables/layout';
-import { computed, ref, watch } from 'vue';
+import { computed, onMounted, ref, watch } from 'vue';
+import { UserPrefStore } from '../stores/UserPrefStore.js';
 import AppFooter from './AppFooter.vue';
 import AppSidebar from './AppSidebar.vue';
 import AppTopbar from './AppTopbar.vue';
@@ -9,6 +10,11 @@ const { layoutConfig, layoutState, isSidebarActive, resetMenu } = useLayout();
 
 const outsideClickListener = ref(null);
 const page = ref("progetti");
+const userPrefStore = UserPrefStore();
+
+onMounted(() => {
+    userPrefStore.fetchUserData();
+});
 
 watch(isSidebarActive, (newVal) => {
     //console.log("routerLink", routerLink);
@@ -55,13 +61,13 @@ const isOutsideClicked = (event) => {
 </script>
 
 <template>
-    <div class="layout-wrapper" :class="containerClass">
+    <div v-if="userPrefStore.userLoaded" class="layout-wrapper" :class="containerClass">
         <app-topbar :page="page"></app-topbar>
        <div class="layout-sidebar">
             <app-sidebar></app-sidebar>
         </div>
         <div class="layout-main-container">
-            <div class="layout-main">
+            <div  class="layout-main">
                 <router-view></router-view>
             </div>
             <app-footer></app-footer>

src/layout/AppTopbar.vue

@@ -4,29 +4,21 @@ import { useAuth } from '@websanova/vue-auth/src/v3.js';
 import { useRouter } from 'vue-router';
 
 
+import { ScenarioStore } from '../stores/ScenarioStore.js';
+import { UserPrefStore } from '../stores/UserPrefStore.js';
+
 import AppConfigurator from './AppConfigurator.vue';
 import AppProfileMenu from './AppProfileMenu.vue';
+
 const auth     = useAuth();
 
 const  router = useRouter();
 const props = defineProps(['page']);
-
+const userPrefStore = UserPrefStore();
+const scenario_store = ScenarioStore();
 
 const { onMenuToggle, toggleDarkMode, isDarkTheme } = useLayout();
 
-/*const fetchData = async () => {
-  try {
-    const response = await axios.get('/userApplications'); 
-    items.value = response.data;
-  } catch (error) {
-    console.error('Errore durante il recupero dei dati:', error);
-  }
-};
-
-// Richiama il metodo all'inizializzazione del componente
-onMounted(() => {
-  fetchData();
-});*/
 
 </script>
 
@@ -83,7 +75,14 @@ onMounted(() => {
                     <AppConfigurator />
                 </div>
             </div>
-
+            <Dropdown 
+                        v-model="userPrefStore.selectedApp"
+                        :options="userPrefStore.availableApp"
+                        optionLabel="fe_name"
+                        placeholder="Select an Option"
+                        class="dropdown-list"
+                        @change="scenario_store.fetchApplicationScenarios()"
+                    />
             <button
                 class="layout-topbar-menu-button layout-topbar-action"
                 v-styleclass="{ selector: '@next', enterFromClass: 'hidden', enterActiveClass: 'animate-scalein', leaveToClass: 'hidden', leaveActiveClass: 'animate-fadeout', hideOnOutsideClick: true }"