Custom select + styling toolbar

public/assets/icons/zoneEditor/chevron.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17 9.5L12 14.5L7 9.5" stroke="#000000" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/components/utilities/zoneEditor/Toolbar.vue

@@ -2,11 +2,13 @@
   <div class="wrapper">
     <div class="toolbar">
       <div class="tools">
-        <button :class="{ active: zoneEditorStore.tool === 'move' }" @click="zoneEditorStore.setTool('move')">
+        <button class="tool move" :class="{ active: zoneEditorStore.tool === 'move' }" @click="zoneEditorStore.setTool('move')">
           <img src="/assets/icons/zoneEditor/move.svg" alt="Move camera" />
         </button>
+
         <div class="divider"></div>
-        <button :class="{ active: zoneEditorStore.tool === 'pencil' }" @click="zoneEditorStore.setTool('pencil')">
+
+        <button class="tool pencil" :class="{ active: zoneEditorStore.tool === 'pencil' }" @click="zoneEditorStore.setTool('pencil')">
           <img src="/assets/icons/zoneEditor/pencil.svg" alt="Pencil" />
           <select v-model="drawMode" v-if="zoneEditorStore.tool === 'pencil'">
             <option value="tile" :selected="zoneEditorStore.drawMode === 'tile'">tile</option>
@@ -15,23 +17,53 @@
             <option value="teleport" :selected="zoneEditorStore.drawMode === 'teleport'">teleport</option>
             <option value="blocking_tile" :selected="zoneEditorStore.drawMode === 'blocking_tile'">blocking tile</option>
           </select>
+          <div class="select" v-if="zoneEditorStore.tool === 'pencil'">
+            <div class="select-trigger" :class="{ open: selectPencilOpen }" @click="selectPencilOpen = !selectPencilOpen">
+              {{ zoneEditorStore.drawMode }}
+              <img src="/assets/icons/zoneEditor/chevron.svg"/>
+            </div>
+            <div class="options" v-show="selectPencilOpen && zoneEditorStore.tool === 'pencil'">
+              <span class="option" data-value="tile">Tile</span>
+              <span class="option" data-value="wall">Wall</span>
+              <span class="option" data-value="decoration">Decoration</span>
+              <span class="option" data-value="teleport">Teleport</span>
+              <span class="option" data-value="blocking_tile">Blocking tile</span>
+            </div>
+          </div>
         </button>
+
         <div class="divider"></div>
-        <button :class="{ active: zoneEditorStore.tool === 'eraser' }" @click="zoneEditorStore.setTool('eraser')">
+
+        <button class="tool eraser" :class="{ active: zoneEditorStore.tool === 'eraser' }" @click="zoneEditorStore.setTool('eraser')">
           <img src="/assets/icons/zoneEditor/eraser.svg" alt="Eraser" />
-          <select v-model="drawMode" v-if="zoneEditorStore.tool === 'eraser'">
+          <select v-model="drawMode" v-if="zoneEditorStore.tool === 'pencil'">
             <option value="tile" :selected="zoneEditorStore.drawMode === 'tile'">tile</option>
             <option value="wall" :selected="zoneEditorStore.drawMode === 'wall'">wall</option>
             <option value="decoration" :selected="zoneEditorStore.drawMode === 'decoration'">decoration</option>
             <option value="teleport" :selected="zoneEditorStore.drawMode === 'teleport'">teleport</option>
             <option value="blocking_tile" :selected="zoneEditorStore.drawMode === 'blocking_tile'">blocking tile</option>
           </select>
+          <div class="select" v-if="zoneEditorStore.tool === 'eraser'">
+            <div class="select-trigger" :class="{ open: selectEraserOpen }" @click="selectEraserOpen = !selectEraserOpen">
+              {{ zoneEditorStore.drawMode }}
+              <img src="/assets/icons/zoneEditor/chevron.svg"/>
+            </div>
+            <div class="options" v-show="selectEraserOpen">
+              <span class="option" data-value="tile">Tile</span>
+              <span class="option" data-value="wall">Wall</span>
+              <span class="option" data-value="decoration">Decoration</span>
+              <span class="option" data-value="teleport">Teleport</span>
+              <span class="option" data-value="blocking_tile">Blocking tile</span>
+            </div>
+          </div>
         </button>
+
         <div class="divider"></div>
-        <button @click="() => zoneEditorStore.toggleSettingsModal()">
+        <button class="tool settings" @click="() => zoneEditorStore.toggleSettingsModal()">
           <img src="/assets/icons/zoneEditor/gear.svg" alt="Zone settings" />
         </button>
       </div>
+
       <div class="buttons">
         <button class="btn-cyan">Load</button>
         <button class="btn-cyan" @click="() => emit('save')">Save</button>
@@ -58,6 +90,11 @@ const props = defineProps({
 const scene = useScene()
 const emit = defineEmits(['move', 'eraser', 'pencil', 'save'])
 
+// track select state
+let selectPencilOpen = ref(false);
+let selectEraserOpen = ref(false);
+
+
 // drawMode
 const drawMode = ref('tile')
 
@@ -119,12 +156,11 @@ function clear() {
   position: fixed;
   top: 20px;
   border-radius: 5px;
-  opacity: 0.8;
   display: flex;
-  background: $dark-gray;
+  background: rgba($dark-gray, 0.8);
   border: 2px solid $cyan;
   color: $light-gray;
-  padding: 5px;
+  padding: 5px 5px 5px 10px;
   min-width: 90%;
   height: 40px;
 
@@ -138,13 +174,73 @@ function clear() {
     }
 
     // vertical center
-    button {
+    .tool {
       display: flex;
       justify-content: center;
       align-items: center;
+      min-width: 40px;
+      padding: 0;
+
+      select {
+        display: none;
+      }
 
       &.active {
         border-bottom: 3px solid $light-cyan;
+        gap: 10px;
+      }
+
+      .select {
+        position: relative;
+        .select-trigger {
+          text-transform: capitalize;
+          display: flex;
+          gap: 15px;
+
+          img {
+            transform: rotate(0);
+            transition: ease-in-out 0.2s;
+          }
+
+          &.open {
+            img {
+              transform: rotate(180deg);
+            }
+          }
+        }
+        .options {
+          display: flex;
+          flex-direction: column;
+          position: absolute;
+          top: calc(100% + 20px);
+          left: 50%;
+          transform: translateX(-50%);
+          background: rgba($dark-gray, 0.8);
+          border-radius: 5px;
+          min-width: 100px;
+          border: 1px solid $cyan;
+          text-align: left;
+          .option {
+            padding: 8px 10px;
+            position: relative;
+            &:hover {
+              background-color: rgba($cyan, 0.5);
+            }
+            &::after {
+              content: '';
+              position: absolute;
+              width: 80%;
+              left: 50%;
+              transform: translateX(-50%);
+              bottom: 0;
+              height: 1px;
+              background-color: $cyan;
+            }
+            &:last-child::after {
+              display: none;
+            }
+          }
+        }
       }
     }