Initiated designer

apps/showcase/layouts/AppTopBar.vue

@@ -94,6 +94,11 @@
                     </button>
                     <AppConfigurator />
                 </li>
+                <li>
+                    <button type="button" class="topbar-item" @click="toggleDesigner">
+                        <i class="pi pi-pencil"></i>
+                    </button>
+                </li>
                 <li>
                     <button
                         v-styleclass="{ selector: '@next', enterFromClass: 'hidden', enterActiveClass: 'animate-scalein', leaveToClass: 'hidden', leaveActiveClass: 'animate-fadeout', hideOnOutsideClick: true }"
@@ -237,6 +242,9 @@ export default {
         },
         containerRef(el) {
             this.container = el;
+        },
+        toggleDesigner() {
+            this.$appState.designerActive = !this.$appState.designerActive;
         }
     },
     components: {

apps/showcase/layouts/default.vue

@@ -9,6 +9,7 @@
                 <slot></slot>
             </div>
         </div>
+        <AppDesigner />
         <AppFooter />
         <Toast />
         <Toast position="top-left" group="tl" />
@@ -22,6 +23,7 @@ import { blockBodyScroll, unblockBodyScroll } from '@primeuix/utils/dom';
 import AppFooter from './AppFooter.vue';
 import AppMenu from './AppMenu.vue';
 import AppNews from './AppNews.vue';
+import AppDesigner from './AppDesigner.vue';
 import AppTopBar from './AppTopBar.vue';
 
 export default {
@@ -82,7 +84,8 @@ export default {
         AppTopBar,
         AppMenu,
         AppFooter,
-        AppNews
+        AppNews,
+        AppDesigner
     }
 };
 </script>

apps/showcase/plugins/app-state.js

@@ -13,7 +13,8 @@ const $appState = {
             sourceType: 'options-api',
             newsActive: false,
             announcement: null,
-            storageKey: 'primevue'
+            storageKey: 'primevue',
+            designerActive: false
         });
     }
 };