Move toolbar over when listpanel is open

src/assets/scss/main.scss

@@ -164,6 +164,10 @@ button {
   @apply bg-gray bg-none;
 }
 
+.list-open {
+  @apply w-[calc(75%_-_40px)] max-xl:w-[calc(100%_-_360px)];
+}
+
 .hair-deselect:has(:checked) {
   img {
     @apply brightness-200;

src/components/gameMaster/mapEditor/partials/Toolbar.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="flex justify-center p-5">
+  <div class="flex justify-between p-5 w-[calc(100%_-_40px)] fixed bottom-0 left-0 z-20" :class="{ 'list-open' : listOpen }">
-    <div class="toolbar fixed bottom-0 left-0 m-3 rounded flex bg-gray solid border-solid border-2 border-gray-500 text-gray-300 p-1.5 px-3 h-10 z-20">
+    <div class="toolbar rounded flex bg-gray solid border-solid border-2 border-gray-500 text-gray-300 p-1.5 px-3 h-10">
       <div ref="toolbar" class="tools flex gap-2.5" v-if="mapEditor.currentMap.value">
         <button class="flex justify-center items-center min-w-10 p-0 relative" :class="{ 'border-0 border-b-[3px] border-solid border-cyan gap-2.5': mapEditor.tool.value === 'move' }" @click="handleClick('move')">
           <img class="invert w-5 h-5" src="/assets/icons/mapEditor/move.svg" alt="Move camera" /> <span class="h-5" :class="{ 'ml-2.5': mapEditor.tool.value !== 'move' }">(M)</span>
@@ -74,15 +74,14 @@
 
         <button class="flex justify-center items-center min-w-10 p-0 relative" @click="isMapEditorSettingsModalOpen = !isMapEditorSettingsModalOpen"><img class="invert w-5 h-5" src="/assets/icons/mapEditor/settings.svg" alt="Map settings" /> <span class="h-5 ml-2.5">(S)</span></button>
       </div>
-
+    </div>
-      <div class="toolbar fixed bottom-0 right-80 m-3 rounded flex bg-gray solid border-solid border-2 border-gray-500 text-gray-300 p-1.5 px-3 h-10 space-x-2">
+    <div class="toolbar rounded flex bg-gray solid border-solid border-2 border-gray-500 text-gray-300 p-1.5 px-3 h-10 space-x-2">
       <button class="btn-cyan px-3.5" @click="() => emit('open-maps')">Load</button>
       <button class="btn-cyan px-3.5" @click="() => emit('save')" v-if="mapEditor.currentMap.value">Save</button>
       <button class="btn-cyan px-3.5" @click="() => emit('clear')" v-if="mapEditor.currentMap.value">Clear</button>
       <button class="btn-cyan px-3.5" @click="() => emit('close-editor')">Exit</button>
     </div>
   </div>
-  </div>
 
   <Modal :isModalOpen="isMapEditorSettingsModalOpen" @modal:close="() => (isMapEditorSettingsModalOpen = false)" :modal-width="300" :modal-height="350" :is-resizable="false" bg-style="none">
     <template #modalHeader>
@@ -113,12 +112,17 @@ const isMapEditorSettingsModalOpen = ref(false)
 const selectPencilOpen = ref(false)
 const selectEraserOpen = ref(false)
 const checkboxValue = ref<Boolean>(false)
+const listOpen = ref(false)
 
 // drawMode
 function setDrawMode(value: string) {
   if (mapEditor.tool.value === 'paint' || mapEditor.tool.value === 'pencil' || mapEditor.tool.value === 'eraser') {
+    listOpen.value = false
     emit('close-lists')
-    if (value === 'tile' || value === 'map_object') emit('open-lists')
+    if (value === 'tile' || value === 'map_object') {
+      listOpen.value = true
+      emit('open-lists')
+    }
   }
 
   mapEditor.setDrawMode(value)
@@ -149,12 +153,15 @@ function handleModeClick(mode: string, type: 'pencil' | 'eraser') {
 function handleClick(tool: string) {
   if (tool === 'mapEditorSettings') {
     isMapEditorSettingsModalOpen.value = true
+    listOpen.value = false
     emit('close-lists')
   }
   if (tool === 'settings') {
+    listOpen.value = false
     emit('open-settings')
     emit('close-lists')
   } else if (tool === 'move') {
+    listOpen.value = false
     emit('close-lists')
     mapEditor.setTool(tool)
   } else {