Created GM Panel

src/components/utilities/AssetManager/AssetManager.vue

@@ -1,9 +1,4 @@
 <template>
-  <Modal :isModalOpen="true" :modal-width="800" :modal-height="630">
-    <template #modalHeader>
-      <h3 class="modal-title">Asset manager</h3>
-    </template>
-    <template #modalBody>
   <div class="assets-container">
     <div class="asset-categories">
       <!-- TODO: Asset categories, replace with loop -->
@@ -68,11 +63,8 @@
     </div>
   </div>
 </template>
-  </Modal>
-</template>
 
 <script setup lang="ts">
-import Modal from '@/components/utilities/Modal.vue'
 </script>
 
 <style lang="scss">

src/components/utilities/GmPanel.vue

@@ -0,0 +1,47 @@
+<template>
+    <Modal :isModalOpen="true" :modal-width="800" :modal-height="650">
+        <template #modalHeader>
+            <h3 class="modal-title">GM Panel</h3>
+            <div class="gm-selector">
+                <button class="btn-cyan" @click="toggle = 'asset-manager'">Asset Manager</button>
+                <button class="btn-cyan" >Button 2</button>
+                <button class="btn-cyan" >Button 3</button>
+            </div>
+        </template>
+        <template #modalBody>
+            
+
+            <div class="panel-body">
+                <AssetManager v-if="toggle == 'asset-manager'" />
+            </div>
+        </template>
+    </Modal>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import Modal from '@/components/utilities/Modal.vue'
+import AssetManager from '@/components/utilities/AssetManager/AssetManager.vue'
+
+let toggle = ref('asset-manager');
+
+</script>
+
+<style lang="scss">
+@import '@/assets/scss/main';
+
+.gm-selector {
+    display: flex;
+    gap: 5px;
+    align-self: end;
+
+    button {
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+        border-bottom: none;
+        padding: 6px 15px;
+        min-width: 100px;
+    }
+}
+
+</style>

src/components/utilities/zoneEditor/ZoneEditor.vue

@@ -13,7 +13,7 @@
   <Tiles v-if="(zoneEditorStore.tool === 'pencil' || zoneEditorStore.tool === 'eraser') && zoneEditorStore.drawMode === 'tile'" />
   <Decorations v-if="(zoneEditorStore.tool === 'pencil' || zoneEditorStore.tool === 'eraser') && zoneEditorStore.drawMode === 'decoration'" />
   <ZoneSettings v-if="zoneEditorStore.isSettingsModalShown" />
-  <AssetManager />
+  <GmPanel />
 </template>
 
 <script setup lang="ts">
@@ -31,7 +31,7 @@ import ZoneSettings from '@/components/utilities/zoneEditor/ZoneSettings.vue'
 import Decorations from '@/components/utilities/zoneEditor/Decorations.vue'
 import { generateTilemap, tileToWorldX, tileToWorldXY, tileToWorldY } from '@/services/zone'
 import type { Zone } from '@/types'
-import AssetManager from '@/components/utilities/AssetManager/AssetManager.vue'
+import GmPanel from '@/components/utilities/GmPanel.vue'
 
 // Phavuer logic
 let scene = useScene()