@myissue/vue-website-page-builder 3.3.18 → 3.3.21

package/src/PageBuilder/PageBuilder.vue

@@ -30,6 +30,10 @@ const props = defineProps({
     type: Object,
     default: null,
   },
+  showCloseButton: {
+    type: Boolean,
+    default: false,
+  },
 })
 
 // Use shared Pinia instance for PageBuilder package
@@ -39,14 +43,18 @@ const pageBuilderStateStore = sharedPageBuilderStore
 
 // Provide store for child components (all pointing to the same consolidated store)
 provide('pageBuilderStateStore', pageBuilderStateStore)
-
 // Provide the internal Pinia instance for components that need to create stores
 provide('internalPinia', internalPinia)
-
 // Provide custom components for child components
 provide('CustomMediaComponent', props.CustomMediaLibraryComponent)
 provide('CustomBuilderComponents', props.CustomBuilderComponents)
 
+const emit = defineEmits(['handleClosePageBuilder'])
+
+const closePageBuilder = function () {
+  emit('handleClosePageBuilder')
+}
+
 // Provide modal close function for custom components
 const closeAddComponentModal = () => {
   showModalAddComponent.value = false
@@ -106,6 +114,10 @@ const getElement = computed(() => {
   return pageBuilderStateStore.getElement
 })
 
+const getRestoredElement = computed(() => {
+  return pageBuilderStateStore.getRestoredElement
+})
+
 const getComponents = computed(() => {
   return pageBuilderStateStore.getComponents
 })
@@ -187,8 +199,6 @@ const secondModalButtonResumeEditingFunction = ref(null)
 const thirdModalButtonResumeEditingFunction = ref(null)
 
 const handlerRumeEditingForUpdate = async function () {
-  await pageBuilderService.clearHtmlSelection()
-
   typeModal.value = 'warning'
   showModalResumeEditing.value = true
 
@@ -260,8 +270,83 @@ const ensureBuilderInitialized = function () {
   }
 }
 
+const pbxToolBar = ref(null)
+
+let lastToolbarLeft = null
+let lastToolbarTop = null
+
+function updatePanelPosition() {
+  const container = pbxToolBar.value
+  const editToolbar = container && container.querySelector('#editToolbar')
+  const restored = getRestoredElement.value
+
+  if (!container || !editToolbar) return
+
+  const selected = container.querySelector('[selected]')
+
+  if (selected && typeof selected.getBoundingClientRect === 'function') {
+    const selectedRect = selected.getBoundingClientRect()
+    const containerRect = container.getBoundingClientRect()
+
+    // Position editToolbar just above selected element, with a gap
+    const left =
+      selectedRect.left - containerRect.left + selectedRect.width / 2 - editToolbar.offsetWidth / 2
+
+    const GAP = 20 // px
+    const proposedTop =
+      selectedRect.top - containerRect.top + container.scrollTop - editToolbar.offsetHeight - GAP
+
+    const top = Math.max(0, proposedTop)
+
+    editToolbar.style.position = 'absolute'
+    editToolbar.style.left = `${left}px`
+    editToolbar.style.top = `${top}px`
+    editToolbar.style.opacity = '1'
+    editToolbar.style.pointerEvents = 'auto'
+    editToolbar.style.transform = 'translateY(0)'
+
+    // Store last position
+    lastToolbarLeft = left
+    lastToolbarTop = top
+  } else if (restored && lastToolbarLeft !== null && lastToolbarTop !== null) {
+    // Use last position for restore icon
+    editToolbar.style.position = 'absolute'
+    editToolbar.style.left = `${lastToolbarLeft}px`
+    editToolbar.style.top = `${lastToolbarTop}px`
+    editToolbar.style.opacity = '1'
+    editToolbar.style.pointerEvents = 'auto'
+    editToolbar.style.transform = 'translateY(0)'
+  } else {
+    editToolbar.style.opacity = '0'
+    editToolbar.style.pointerEvents = 'none'
+    editToolbar.style.transform = 'translateY(0.5rem)'
+  }
+}
+
 onMounted(async () => {
   await pageBuilderService.tryMountPendingComponents()
+
+  updatePanelPosition()
+
+  // Set up MutationObserver and event listeners
+  const container = pbxToolBar.value
+  if (!container) return
+
+  const observer = new MutationObserver(updatePanelPosition)
+  observer.observe(container, {
+    childList: true,
+    subtree: true,
+    attributes: true,
+    attributeFilter: ['selected'],
+  })
+
+  window.addEventListener('scroll', updatePanelPosition)
+  window.addEventListener('resize', updatePanelPosition)
+
+  //
+  //
+  //
+  //
   // Check if Builder started
   await delay(10000)
   ensureBuilderInitialized()
@@ -280,64 +365,19 @@ onMounted(async () => {
   <div
     class="pbx-font-sans pbx-max-w-full pbx-m-1 pbx-border pbx-border-gray-400 pbx-inset-x-0 pbx-z-10 pbx-bg-white pbx-overflow-x-auto"
   >
-    <div id="pagebuilder-top-area" class="lg:pbx-px-4 pbx-pt-2 pbx-pb-4 pbx-mx-4 pbx-mb-4 pbx-mt-2">
-      <GlobalLoader v-if="getIsLoadingGlobal & !openAppNotStartedModal"></GlobalLoader>
-      <ModalBuilder
-        title="The builder hasn’t started yet"
-        :showModalBuilder="openAppNotStartedModal"
-        @closeMainModalBuilder="handlAppNotStartedModal"
-        type="delete"
-        maxWidth="2xl"
-        :noBackgroundOpacity="true"
-      >
-        The builder hasn’t started yet. If this screen doesn’t go away soon, it may just need a
-        little setup in the background. You can safely contact support and ask them to initialize
-        the builder by running the startBuilder method for this resource.
-      </ModalBuilder>
-      <div
-        @click.self="
-          async () => {
-            await pageBuilderService.clearHtmlSelection()
-          }
-        "
-        class="pbx-min-h-24 pbx-flex pbx-justify-between pbx-items-center pbx-pb-2 pbx-border-b pbx-border-gray-200"
-      >
-        <!-- Logo # start -->
-        <div
-          @click="
-            async () => {
-              await pageBuilderService.clearHtmlSelection()
-            }
-          "
-        >
-          <div
-            v-if="
-              getPageBuilderConfig &&
-              getPageBuilderConfig.pageBuilderLogo &&
-              getPageBuilderConfig.pageBuilderLogo.src
-            "
-            class="pbx-flex pbx-items-center pbx-divide-x pbx-divide-gray-200"
-          >
-            <div id="pagebuilder-logo-main" class="pbx-pr-4">
-              <img class="pbx-h-6" :src="getPageBuilderConfig.pageBuilderLogo.src" alt="Logo" />
-            </div>
-            <span class="pbx-myPrimaryParagraph pbx-font-medium pbx-pl-4">Editing Page </span>
-          </div>
-          <div v-else>
-            <div class="pbx-pr-6">
-              <span class="pbx-myPrimaryParagraph pbx-font-medium">Editing Page </span>
-            </div>
-          </div>
-        </div>
-        <!-- Logo # end -->
-
-        <!-- Options # Start -->
-        <div>
-          <ToolbarOption></ToolbarOption>
-        </div>
-        <!-- Options # Start -->
-      </div>
-    </div>
+    <GlobalLoader v-if="getIsLoadingGlobal & !openAppNotStartedModal"></GlobalLoader>
+    <ModalBuilder
+      title="The builder hasn’t started yet"
+      :showModalBuilder="openAppNotStartedModal"
+      @closeMainModalBuilder="handlAppNotStartedModal"
+      type="delete"
+      maxWidth="2xl"
+      :noBackgroundOpacity="true"
+    >
+      The builder hasn’t started yet. If this screen doesn’t go away soon, it may just need a little
+      setup in the background. You can safely contact support and ask them to initialize the builder
+      by running the startBuilder method for this resource.
+    </ModalBuilder>
 
     <BuilderComponents
       v-if="showModalAddComponent"
@@ -393,78 +433,114 @@ onMounted(async () => {
     </DynamicModalBuilder>
 
     <div>
-      <div class="pbx-relative pbx-h-full pbx-flex pbx-pb-2 pbx-gap-2">
-        <div
-          @click.self="
-            async () => {
-              await pageBuilderService.clearHtmlSelection()
-            }
+      <!-- Top Layout Save And Reset Area - Start -->
+      <div
+        id="pagebuilder-toolbar-area"
+        class="pbx-flex pbx-items-center pbx-justify-between pbx-bg-myPrimaryLightGrayColor pbx-border-b pbx-border-gray-200 pbx-mb-2 lg:pbx-px-6 pbx-px-4"
+      >
+        <template
+          v-if="
+            getPageBuilderConfig &&
+            getPageBuilderConfig.pageBuilderLogo &&
+            getPageBuilderConfig.pageBuilderLogo.src
           "
-          id="pagebuilder-left-area"
-          class="pbx-min-w-[3.5rem] pbx-pt-7 pbx-pb-2 pbx-ml-2 pbx-bg-myPrimaryLightGrayColor pbx-rounded-full pbx-shadow-sm"
         >
-          <div class="pbx-mx-2 pbx-flex pbx-flex-col pbx-myPrimaryGap pbx-items-stretch">
-            <div class="pbx-flex pbx-gap-2 pbx-items-center pbx-justify-center">
-              <button
-                type="button"
-                @click="
-                  () => {
-                    pageBuilderStateStore.setComponentArrayAddMethod('unshift')
-                    handleAddComponent()
-                  }
-                "
-                class="pbx-h-10 pbx-w-10 pbx-cursor-pointer pbx-rounded-full pbx-flex pbx-items-center pbx-border-none pbx-justify-center pbx-bg-gray-50 pbx-aspect-square hover:pbx-bg-myPrimaryLinkColor hover:pbx-text-white focus-visible:pbx-ring-0"
-              >
-                <span class="pbx-myMediumIcon material-symbols-outlined"> interests </span>
-              </button>
-            </div>
+          <!-- Logo # start -->
+          <div
+            @click.self="
+              async () => {
+                await pageBuilderService.clearHtmlSelection()
+              }
+            "
+            class="pbx-flex pbx-justify-start pbx-py-2 pbx-min-h-20 pbx-max-h-20 pbx-w-full"
+          >
             <div
-              @click.self="
+              @click="
                 async () => {
                   await pageBuilderService.clearHtmlSelection()
                 }
               "
+              class="pbx-flex pbx-items-center pbx-justify-center"
             >
-              <ComponentTopMenu v-if="getElement"></ComponentTopMenu>
+              <div id="pagebuilder-logo-main" class="pbx-flex pbx-items-center pbx-justify-center">
+                <img class="pbx-h-6" :src="getPageBuilderConfig.pageBuilderLogo.src" alt="Logo" />
+              </div>
             </div>
           </div>
-        </div>
-        <main
-          class="pbx-flex pbx-flex-col pbx-h-full pbx-grow pbx-rounded-tr-2xl pbx-rounded-tl-2xl pbx-border pbx-border-gray-200 pbx-items-stretch"
-          :class="{ 'pbx-mr-2': !getMenuRight, '': getMenuRight }"
+        </template>
+        <!-- Logo # end -->
+
+        <div
+          @click.self="
+            async () => {
+              await pageBuilderService.clearHtmlSelection()
+            }
+          "
+          class="pbx-flex pbx-justify-center pbx-items-center pbx-py-2 pbx-min-h-20 pbx-max-h-20 pbx-w-full"
         >
-          <div
-            id="pagebuilder-toolbar-area"
-            class="pbx-flex pbx-items-center pbx-justify-between pbx-rounded-t-2xl pbx-min-w-[30rem] pbx-bg-myPrimaryLightGrayColor pbx-border-b pbx-border-gray-200"
-          >
-            <div
-              @click.self="
+          <div class="pbx-flex pbx-items-center pbx-justify-center">
+            <!-- Save Start -->
+            <button
+              class="pbx-mySecondaryButton pbx-h-6 pbx-flex pbx-gap-2 pbx-mr-2"
+              @click.stop="
                 async () => {
                   await pageBuilderService.clearHtmlSelection()
+                  await pageBuilderService.handleManualSave()
                 }
               "
-              class="pbx-min-w-max pbx-pr-2 pbx-flex pbx-myPrimaryGap pbx-items-center pbx-pt-2 pbx-pb-2 pbx-pl-2 pbx-h-24 pbx-w-full"
+              type="button"
+              :disabled="getIsSaving"
+            >
+              <div
+                v-if="!getIsSaving"
+                class="pbx-h-10 pbx-w-4 pbx-cursor-pointer pbx-rounded-full pbx-flex pbx-items-center pbx-justify-center"
+              >
+                <span class="material-symbols-outlined">save</span>
+              </div>
+              <div
+                v-if="getIsSaving"
+                class="pbx-h-10 pbx-w-4 pbx-cursor-pointer pbx-rounded-full pbx-flex pbx-items-center pbx-justify-center"
+              >
+                <span class="pbx-relative pbx-flex pbx-size-3">
+                  <span
+                    class="pbx-absolute pbx-inline-flex pbx-h-full pbx-w-full pbx-animate-ping pbx-rounded-full pbx-bg-gray-400 pbx-opacity-75"
+                  ></span>
+                  <span
+                    class="pbx-relative pbx-inline-flex pbx-size-3 pbx-rounded-full pbx-bg-green-200"
+                  ></span>
+                </span>
+              </div>
+              <div>Save</div>
+            </button>
+            <!-- Save End -->
+
+            <!-- Restore Start -->
+            <template
+              v-if="
+                getPageBuilderConfig &&
+                getPageBuilderConfig.updateOrCreate &&
+                getPageBuilderConfig.updateOrCreate.formType === 'update'
+              "
             >
-              <!-- Save Start -->
               <button
                 class="pbx-mySecondaryButton pbx-h-6 pbx-flex pbx-gap-2"
                 @click.stop="
                   async () => {
                     await pageBuilderService.clearHtmlSelection()
-                    await pageBuilderService.handleManualSave()
+                    await handleRestoreOriginalContent()
                   }
                 "
                 type="button"
-                :disabled="getIsSaving"
+                :disabled="getIsRestoring"
               >
                 <div
-                  v-if="!getIsSaving"
+                  v-if="!getIsRestoring"
                   class="pbx-h-10 pbx-w-4 pbx-cursor-pointer pbx-rounded-full pbx-flex pbx-items-center pbx-justify-center"
                 >
-                  <span class="material-symbols-outlined">save</span>
+                  <span class="material-symbols-outlined"> settings_backup_restore </span>
                 </div>
                 <div
-                  v-if="getIsSaving"
+                  v-if="getIsRestoring"
                   class="pbx-h-10 pbx-w-4 pbx-cursor-pointer pbx-rounded-full pbx-flex pbx-items-center pbx-justify-center"
                 >
                   <span class="pbx-relative pbx-flex pbx-size-3">
@@ -476,154 +552,172 @@ onMounted(async () => {
                     ></span>
                   </span>
                 </div>
-                <div>Save</div>
+                <div class="lg:pbx-block pbx-hidden">
+                  <span> Reset Page </span>
+                </div>
               </button>
-              <!-- Save End -->
-
-              <!-- Restore Start -->
-              <template
-                v-if="
-                  getPageBuilderConfig &&
-                  getPageBuilderConfig.updateOrCreate &&
-                  getPageBuilderConfig.updateOrCreate.formType === 'update'
-                "
-              >
-                <button
-                  class="pbx-mySecondaryButton pbx-h-6 pbx-flex pbx-gap-2"
-                  @click.stop="
-                    async () => {
-                      await pageBuilderService.clearHtmlSelection()
-                      await handleRestoreOriginalContent()
-                    }
-                  "
-                  type="button"
-                  :disabled="getIsRestoring"
-                >
-                  <div
-                    v-if="!getIsRestoring"
-                    class="pbx-h-10 pbx-w-4 pbx-cursor-pointer pbx-rounded-full pbx-flex pbx-items-center pbx-justify-center"
-                  >
-                    <span class="material-symbols-outlined"> settings_backup_restore </span>
-                  </div>
-                  <div
-                    v-if="getIsRestoring"
-                    class="pbx-h-10 pbx-w-4 pbx-cursor-pointer pbx-rounded-full pbx-flex pbx-items-center pbx-justify-center"
-                  >
-                    <span class="pbx-relative pbx-flex pbx-size-3">
-                      <span
-                        class="pbx-absolute pbx-inline-flex pbx-h-full pbx-w-full pbx-animate-ping pbx-rounded-full pbx-bg-gray-400 pbx-opacity-75"
-                      ></span>
-                      <span
-                        class="pbx-relative pbx-inline-flex pbx-size-3 pbx-rounded-full pbx-bg-green-200"
-                      ></span>
-                    </span>
-                  </div>
-                  <div class="lg:pbx-block pbx-hidden">
-                    <span> Reset Page </span>
-                  </div>
-                </button>
-              </template>
-              <!-- Restore End -->
-            </div>
+            </template>
+            <!-- Restore End -->
+          </div>
+        </div>
 
-            <div
-              @click.self="
-                async () => {
-                  await pageBuilderService.clearHtmlSelection()
+        <div
+          @click.self="
+            async () => {
+              await pageBuilderService.clearHtmlSelection()
+            }
+          "
+          class="pbx-flex pbx-justify-center pbx-items-center pbx-py-2 pbx-min-h-20 pbx-max-h-20 pbx-w-full"
+        >
+          <div
+            @click.self="
+              async () => {
+                await pageBuilderService.clearHtmlSelection()
+              }
+            "
+            class="pbx-flex pbx-items-center pbx-justify-center"
+          >
+            <button
+              type="button"
+              class="pbx-mr-2"
+              @click="
+                () => {
+                  pageBuilderStateStore.setComponentArrayAddMethod('unshift')
+                  handleAddComponent()
                 }
               "
-              class="pbx-flex pbx-justify-end pbx-py-2 pbx-pr-2 pbx-h-24 pbx-w-full"
             >
-              <div
-                @click.self="
+              <div class="pbx-flex pbx-items-center pbx-justify-center pbx-gap-2">
+                <span class="lg:pbx-block pbx-hidden">
+                  <div class="pbx-whitespace-nowrap">Add new Components</div>
+                </span>
+                <span
+                  class="pbx-h-10 pbx-w-10 pbx-cursor-pointer pbx-rounded-full pbx-flex pbx-items-center pbx-border-none pbx-justify-center pbx-bg-gray-50 pbx-aspect-square hover:pbx-bg-myPrimaryLinkColor hover:pbx-text-white focus-visible:pbx-ring-0"
+                >
+                  <span class="pbx-myMediumIcon material-symbols-outlined"> interests </span>
+                </span>
+              </div>
+            </button>
+            <div class="pbx-flex pbx-items-center pbx-justify-center">
+              <button
+                type="button"
+                @click="
                   async () => {
+                    pageBuilderStateStore.setMenuRight(false)
+                    pageBuilderStateStore.setElement(null)
                     await pageBuilderService.clearHtmlSelection()
+                    handlePageBuilderPreview()
                   }
                 "
-                class="pbx-flex pbx-items-center pbx-justify-center pbx-gap-4"
               >
-                <button
-                  type="button"
-                  @click="
-                    () => {
-                      pageBuilderStateStore.setComponentArrayAddMethod('unshift')
-                      handleAddComponent()
-                    }
-                  "
-                >
-                  <div class="pbx-flex pbx-items-center pbx-justify-center pbx-gap-2">
-                    <span class="lg:pbx-block pbx-hidden">
-                      <div class="pbx-whitespace-nowrap">Add new Components</div>
-                    </span>
-                    <span
-                      class="pbx-h-10 pbx-w-10 pbx-cursor-pointer pbx-rounded-full pbx-flex pbx-items-center pbx-border-none pbx-justify-center pbx-bg-gray-50 pbx-aspect-square hover:pbx-bg-myPrimaryLinkColor hover:pbx-text-white focus-visible:pbx-ring-0"
-                    >
-                      <span class="pbx-myMediumIcon material-symbols-outlined"> interests </span>
-                    </span>
-                  </div>
-                </button>
-                <div class="pbx-flex pbx-items-center pbx-justify-center pbx-gap-4">
-                  <button
-                    type="button"
-                    @click="
-                      async () => {
-                        pageBuilderStateStore.setMenuRight(false)
-                        pageBuilderStateStore.setElement(null)
-                        await pageBuilderService.clearHtmlSelection()
-                        handlePageBuilderPreview()
-                      }
-                    "
+                <div class="pbx-flex pbx-items-center pbx-justify-center pbx-gap-2">
+                  <div class="pbx-whitespace-nowrap lg:pbx-block pbx-hidden">Preview</div>
+
+                  <span
+                    class="pbx-h-10 pbx-w-10 pbx-cursor-pointer pbx-rounded-full pbx-flex pbx-items-center pbx-border-none pbx-justify-center pbx-bg-gray-50 pbx-aspect-square hover:pbx-bg-myPrimaryLinkColor hover:pbx-text-white focus-visible:pbx-ring-0"
                   >
-                    <div class="pbx-flex pbx-items-center pbx-justify-center pbx-gap-2">
-                      <div class="pbx-whitespace-nowrap lg:pbx-block pbx-hidden">Preview</div>
-
-                      <span
-                        class="pbx-h-10 pbx-w-10 pbx-cursor-pointer pbx-rounded-full pbx-flex pbx-items-center pbx-border-none pbx-justify-center pbx-bg-gray-50 pbx-aspect-square hover:pbx-bg-myPrimaryLinkColor hover:pbx-text-white focus-visible:pbx-ring-0"
-                      >
-                        <span class="pbx-myMediumIcon material-symbols-outlined"> visibility </span>
-                      </span>
-                    </div>
-                  </button>
+                    <span class="pbx-myMediumIcon material-symbols-outlined"> visibility </span>
+                  </span>
                 </div>
-              </div>
+              </button>
             </div>
-
-            <div
-              @click.self="
+          </div>
+        </div>
+        <!-- Options # Start -->
+        <div
+          @click.self="
+            async () => {
+              await pageBuilderService.clearHtmlSelection()
+            }
+          "
+          class="pbx-flex pbx-items-center pbx-py-2 pbx-min-h-20 pbx-max-h-20 pbx-w-full"
+          :class="[showCloseButton ? 'pbx-justify-between' : 'pbx-justify-end']"
+        >
+          <ToolbarOption></ToolbarOption>
+          <template v-if="showCloseButton">
+            <button
+              class="pbx-h-10 pbx-w-10 pbx-flex-end pbx-cursor-pointer pbx-rounded-full pbx-flex pbx-items-center pbx-border-none pbx-justify-center pbx-bg-gray-50 pbx-aspect-square hover:pbx-bg-myPrimaryLinkColor hover:pbx-text-white hover:pbx-fill-white focus-visible:pbx-ring-0"
+              @click="
                 async () => {
+                  closePageBuilder()
                   await pageBuilderService.clearHtmlSelection()
                 }
               "
-              class="pbx-flex pbx-justify-end pbx-py-2 pbx-pr-2 pbx-w-full pbx-h-24"
             >
-              <div
-                @click.self="
-                  async () => {
-                    await pageBuilderService.clearHtmlSelection()
+              <span class="material-symbols-outlined"> close </span>
+            </button>
+          </template>
+        </div>
+        <!-- Options # Start -->
+      </div>
+
+      <!-- Top Layout Save And Reset Area - End -->
+      <div class="pbx-relative pbx-h-full pbx-flex pbx-pb-2 pbx-gap-2">
+        <div
+          @click.self="
+            async () => {
+              await pageBuilderService.clearHtmlSelection()
+            }
+          "
+          id="pagebuilder-left-area"
+          class="pbx-min-w-[3.5rem] pbx-pt-7 pbx-pb-2 pbx-ml-2 pbx-bg-myPrimaryLightGrayColor pbx-rounded-full pbx-shadow-sm"
+        >
+          <div class="pbx-mx-2 pbx-flex pbx-flex-col pbx-myPrimaryGap pbx-items-stretch">
+            <div class="pbx-flex pbx-gap-2 pbx-items-center pbx-justify-center">
+              <button
+                type="button"
+                @click="
+                  () => {
+                    pageBuilderStateStore.setComponentArrayAddMethod('unshift')
+                    handleAddComponent()
                   }
                 "
-                class="pbx-flex pbx-items-center pbx-justify-center pbx-gap-4"
+                class="pbx-h-10 pbx-w-10 pbx-cursor-pointer pbx-rounded-full pbx-flex pbx-items-center pbx-border-none pbx-justify-center pbx-bg-gray-50 pbx-aspect-square hover:pbx-bg-myPrimaryLinkColor hover:pbx-text-white focus-visible:pbx-ring-0"
               >
-                <button
-                  type="button"
-                  v-if="getMenuRight === false"
-                  @click="pageBuilderStateStore.setMenuRight(true)"
-                >
-                  <div class="pbx-flex pbx-items-center pbx-justify-center pbx-gap-2">
-                    <span class="lg:pbx-block pbx-hidden"> Styling </span>
-
-                    <span
-                      class="pbx-h-10 pbx-w-10 pbx-cursor-pointer pbx-rounded-full pbx-flex pbx-items-center pbx-border-none pbx-justify-center pbx-bg-gray-50 pbx-aspect-square hover:pbx-bg-myPrimaryLinkColor hover:pbx-text-white focus-visible:pbx-ring-0"
-                    >
-                      <span class="pbx-myMediumIcon material-symbols-outlined"> more_vert </span>
-                    </span>
-                  </div>
-                </button>
-              </div>
+                <span class="pbx-myMediumIcon material-symbols-outlined"> interests </span>
+              </button>
             </div>
+            <div
+              @click.self="
+                async () => {
+                  await pageBuilderService.clearHtmlSelection()
+                }
+              "
+            >
+              <ComponentTopMenu v-if="getElement"></ComponentTopMenu>
+            </div>
+          </div>
+        </div>
+
+        <main
+          ref="pbxToolBar"
+          class="pbx-flex pbx-flex-col pbx-h-full pbx-grow pbx-rounded-tr-2xl pbx-rounded-tl-2xl pbx-border pbx-border-gray-200 pbx-items-stretch"
+          :class="{ 'pbx-mr-2': !getMenuRight, '': getMenuRight }"
+        >
+          <div
+            id="editToolbar"
+            class="pbx-z-30 lg:pbx-mx-20 pbx-flex pbx-gap-2 pbx-justify-center pbx-min-w-48 pbx-items-center pbx-rounded-full pbx-px-4"
+            style="
+              outline: 10px solid oklch(86.9% 0.005 56.366);
+              outline-offset: 0px;
+              background: oklch(86.9% 0.005 56.366);
+            "
+          >
+            <template v-if="getElement">
+              <EditGetElement></EditGetElement>
+            </template>
+            <template v-if="getRestoredElement">
+              <button
+                @click="pageBuilderService.restoreDeletedElementToDOM"
+                type="button"
+                class="pbx-h-10 pbx-w-10 pbx-flex-end pbx-cursor-pointer pbx-rounded-full pbx-flex pbx-items-center pbx-border-none pbx-justify-center pbx-aspect-square hover:pbx-bg-gray-100 hover:pbx-fill-white pbx-bg-gray-200 focus-visible:pbx-ring-0"
+              >
+                <span class="material-symbols-outlined"> undo </span>
+              </button>
+            </template>
           </div>
+          <!-- Element Popover toolbar end -->
 
-          <EditGetElement></EditGetElement>
           <div
             id="contains-pagebuilder"
             class="pbx-pl-4 pbx-pr-4 pbx-pb-4 pbx-overflow-y-auto pbx-pt-1 pbx-h-[39rem]"
@@ -641,13 +735,39 @@ onMounted(async () => {
                     <div v-html="component.html_code"></div>
                   </div>
                 </div>
+                <!-- Added Components to DOM # end -->
               </div>
-              <!-- Added Components to DOM # end -->
             </div>
           </div>
         </main>
 
-        <!-- Add Component # end -->
+        <div
+          v-if="!getMenuRight"
+          @click.self="
+            async () => {
+              await pageBuilderService.clearHtmlSelection()
+            }
+          "
+          class="pbx-min-w-[3.5rem] pbx-pt-7 pbx-pb-2 pbx-ml-2 pbx-border-l pbx-border-gray-200"
+        >
+          <div
+            @click.self="
+              async () => {
+                await pageBuilderService.clearHtmlSelection()
+              }
+            "
+            class="pbx-flex pbx-items-center pbx-justify-center pbx-gap-4"
+          >
+            <button
+              type="button"
+              v-if="!getMenuRight"
+              @click="pageBuilderStateStore.setMenuRight(true)"
+              class="pbx-h-10 pbx-w-10 pbx-cursor-pointer pbx-rounded-full pbx-flex pbx-items-center pbx-border-none pbx-justify-center pbx-bg-gray-50 pbx-aspect-square hover:pbx-bg-myPrimaryLinkColor hover:pbx-text-white focus-visible:pbx-ring-0"
+            >
+              <span class="material-symbols-outlined"> palette </span>
+            </button>
+          </div>
+        </div>
 
         <aside
           aria-label="Menu"