Refactor layout components and update theme configuration

src/layout/AppConfigurator.vue

@@ -6,6 +6,7 @@ import Lara from '@primevue/themes/lara';
 import Nora from '@primevue/themes/nora';
 import { ref } from 'vue';
 
+
 const { layoutConfig, setPrimary, setSurface, setPreset, isDarkTheme } = useLayout();
 
 const preset = ref(layoutConfig.preset);
@@ -73,6 +74,8 @@ const surfaces = ref([
     }
 ]);
 
+
+
 function getPresetExt() {
     const color = primaryColors.value.find((c) => c.name === layoutConfig.primary);
 
@@ -203,6 +206,7 @@ function getPresetExt() {
 
 function updateColors(type, color) {
     if (type === 'primary') {
+        console.log("color", color);
         setPrimary(color.name);
     } else if (type === 'surface') {
         setSurface(color.name);
@@ -220,6 +224,7 @@ function applyTheme(type, color) {
 }
 
 function onPresetChange(value) {
+    console.log("value", value);
     setPreset(value);
     const presetValue = presets[value];
     const surfacePalette = surfaces.value.find((s) => s.name === layoutConfig.surface)?.palette;

src/layout/AppLayout.vue

@@ -8,7 +8,7 @@ import AppSidebar from './AppSidebar.vue';
 import AppTopbar from './AppTopbar.vue';
 
 
-const { hideMenu, layoutConfig, layoutState, isSidebarActive, resetMenu } = useLayout();
+const { hideMenu, layoutConfig, layoutState, isSidebarActive, resetMenu,setPrimary, setPreset } = useLayout();
 
 const outsideClickListener = ref(null);
 const page = ref("progetti");
@@ -16,8 +16,8 @@ const userPrefStore = UserPrefStore();
 const route = useRoute();
 
 onMounted(() => {
-    
     userPrefStore.fetchUserData();
+    
 });
 
 watch(isSidebarActive, (newVal) => {

src/layout/AppMenu.vue

@@ -62,8 +62,8 @@ watch(() => userPrefStore.getSelApp, updateApplicationsMenu, { immediate: true }
     <ul class="layout-menu">
         <template v-for="(item, i) in model" :key="item">
             <app-menu-item v-if="!item.separator" :item="item" :index="i"></app-menu-item>
-            <li v-if="item.separator" class="menu-separator"></li>
+            <!--<li v-if="item.separator" class="menu-separator"></li>
-            <hr v-if="i === 0" class="menu-separator"/>
+            <hr v-if="i === 0" class="menu-separator"/>-->
         </template>
     </ul>
 </template>

src/layout/AppTopbar.vue

@@ -77,18 +77,14 @@ watch(() => userPrefStore.getSelApp, appUpdated, { immediate: true });
                 
                 <ProgressSpinner v-if="loadingStore.isLoading" style="width: 25px; height: 25px; margin-top: 6px" strokeWidth="2" fill="transparent"/>
 
-                <button  @click="router.push('/canvas')" class="layout-topbar-action" >
+              
-                    <i class="pi pi-file-edit"></i>
-                </button >
                 <button @click="router.push('/mdcanvas')"  class="layout-topbar-action" >
                     <i class="pi pi-pencil"></i>
                 </button >
-                <button type="button" class="layout-topbar-action" @click="toggleDarkMode">
+         
-                    <i :class="['pi', { 'pi-moon': isDarkTheme, 'pi-sun': !isDarkTheme }]"></i>
-                </button>
                  
                 <div class="relative">
-                    <button
+                   <!----> <button
                         v-styleclass="{ selector: '@next', enterFromClass: 'hidden', enterActiveClass: 'animate-scalein', leaveToClass: 'hidden', leaveActiveClass: 'animate-fadeout', hideOnOutsideClick: true }"
                         type="button"
                         class="layout-topbar-action layout-topbar-action-highlight"
@@ -97,24 +93,26 @@ watch(() => userPrefStore.getSelApp, appUpdated, { immediate: true });
                     </button>
                     <AppConfigurator />
                 </div>
-                <div>
+             
-                    <h1 v-if="userPrefStore.user.selectedProject">
-              {{ userPrefStore.user.selectedProject.fe_name }}
-                    </h1> 
-                </div>
             
            
             </div>
-            
+            <div class="topbar-project">
+                    <span v-if="userPrefStore.user.selectedProject">
+                        <small>PROJECT:</small> {{ userPrefStore.user.selectedProject.fe_name }}
+                    </span> 
+                </div>
             <Dropdown 
                         v-model="selectedApp"
                         :options="userPrefStore.availableApp"
                         optionLabel="fe_name"
                         placeholder="Select an Application"
-                        class="dropdown-list"
+                        class="dropdown-list menu-list"
+                      
                         @change="updateApplication()"
                         :disabled="route.path === '/projects'"
-                    />
+                    />   
+                
             <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 }"
@@ -138,3 +136,19 @@ watch(() => userPrefStore.getSelApp, appUpdated, { immediate: true });
         </div>
     </div>
 </template>
+
+<style scoped>
+.topbar-project {
+    display: flex;
+    align-items: center;
+    justify-content: left;
+    margin-left: 1rem;
+    font-size: 1.2rem;
+    min-width: 100px;
+
+}
+.menu-list {
+    width: 200px;
+    margin-right: 1rem;
+}
+</style>

src/layout/composables/layout.js

@@ -2,7 +2,7 @@ import { computed, reactive, readonly } from 'vue';
 
 const layoutConfig = reactive({
     preset: 'Nora',
-    primary: 'purple',
+    primary: {palette: { 50: '#f5f3ff', 100: '#ede9fe', 200: '#ddd6fe', 300: '#c4b5fd', 400: '#a78bfa', 500: '#8b5cf6', 600: '#7c3aed', 700: '#6d28d9', 800: '#5b21b6', 900: '#4c1d95', 950: '#2e1065' }},
     surface: 'viva',
     darkTheme: false,
     menuMode: 'static',

src/main.js

@@ -9,7 +9,7 @@ import App from './App.vue';
 import router from './router';
 
 
-import Aura from '@primevue/themes/aura';
+import Nora from '@primevue/themes/nora';
 import PrimeVue from 'primevue/config';
 import ConfirmationService from 'primevue/confirmationservice';
 import ToastService from 'primevue/toastservice';
@@ -63,10 +63,12 @@ app.use(router);
 
 app.use(PrimeVue, {
     theme: {
-        preset: Aura,
+        preset: Nora,
         options: {
-            darkModeSelector: '.app-dark'
+            prefix: 'p',
-        }
+            darkModeSelector: '.app-dark',
+            cssLayer: false
+        },
     }
 });
 app.use(ToastService);