Edit-Menu: Use side-config-panel to element-config

Signed-off-by: Arturo Manzoli <[email protected]>

src/components/EditMenu.vue

@@ -617,21 +617,10 @@
       </v-card>
     </GlassModal>
   </teleport>
-  <transition
-    enter-active-class="transition-transform duration-500 ease-in-out"
-    leave-active-class="transition-transform duration-0 ease-in-out"
-    enter-from-class="translate-x-full opacity-0"
-    enter-to-class="translate-x-0 opacity-100"
-    leave-from-class="translate-x-0 opacity-100"
-    leave-to-class="translate-x-full opacity-0"
-  >
-    <div
-      v-if="store.isElementsPropsDrawerVisible && store.editingMode && store.elementToShowOnDrawer"
-      class="flex fixed w-[250px] h-[78vh] right-0 top-0 border-l-[1px] border-[#FFFFFF44] text-white elevation-5 bg-[#051e2d]"
-    >
-      <ElementConfigPanel />
-    </div>
-  </transition>
+
+  <SideConfigPanel position="right">
+    <ElementConfigPanel v-if="store.elementToShowOnDrawer?.hash" />
+  </SideConfigPanel>
 </template>
 
 <script setup lang="ts">
@@ -672,10 +661,11 @@ import {
   WidgetType,
 } from '@/types/widgets'
 
-import ElementConfigPanel from './ElementConfigPanel.vue'
 import ExpansiblePanel from './ExpansiblePanel.vue'
 import GlassModal from './GlassModal.vue'
+import ElementConfigPanel from './InputElementConfig.vue'
 import MiniWidgetInstantiator from './MiniWidgetInstantiator.vue'
+import SideConfigPanel from './SideConfigPanel.vue'
 
 const { showDialog, closeDialog } = useInteractionDialog()
 
@@ -714,6 +704,14 @@ const emit = defineEmits<{
   (e: 'update:editMode', editMode: boolean): void
 }>()
 
+watch(
+  () => store.elementToShowOnDrawer?.hash,
+  (newValue) => {
+    if (newValue) interfaceStore.configPanelVisible = true
+    if (!newValue) interfaceStore.configPanelVisible = false
+  }
+)
+
 const availableWidgetTypes = computed(() => Object.values(WidgetType))
 const availableMiniWidgetTypes = computed(() =>
   Object.values(MiniWidgetType).map((widgetType) => ({