feat: ToolButton menu

src/UserInterface/ToolBar/components/Home/Draw.vue

@@ -7,11 +7,12 @@ import ToolButton from '../ToolButton.vue'
 <template>
   <ButtonGroup :name="$t('ToolBar.home.drawing.title')">
     <div class="flex">
-      <ToolButton :clickHandler="() => {}">
+      <ToolButton :hasMenu="true">
         <template #icon>
           <GraphicDesign theme="two-tone" size="32" :fill="['#333', '#83BEEC']" :strokeWidth="1" />
         </template>
         <template #name>{{ $t('ToolBar.home.drawing.shapes') }}</template>
+        <template #menu>draw menu test</template>
       </ToolButton>
 
       <!-- <button class="menu-btn flex flex-col items-center justify-center">

src/UserInterface/ToolBar/components/TabContent.vue

@@ -2,7 +2,7 @@
 
 <template>
   <div class="px-2">
-    <div class="h-[100px] py-2 mb-1 bg-white rounded-md shadow translate-y-1 flex">
+    <div class="h-[100px] py-2 mb-1 bg-white rounded-md shadow flex">
       <slot />
     </div>
   </div>

src/UserInterface/ToolBar/components/ToolButton.vue

@@ -1,23 +1,46 @@
 <script setup lang="ts">
 import { Down } from '@icon-park/vue-next'
+import { ref, onMounted, onUnmounted } from 'vue'
 
-const { clickHandler } = defineProps<{
+const props = defineProps<{
   clickHandler?: (event: MouseEvent) => void
   disabled?: boolean
   hasMenu?: boolean
 }>()
+
+const showMenu = ref(false)
+const onClick = (event: MouseEvent) => {
+  if (props.hasMenu) {
+    showMenu.value = !showMenu.value
+  } else {
+    props.clickHandler?.(event)
+  }
+}
+
+const hideMenu = () => {
+  showMenu.value = false
+}
+onMounted(() => {
+  document.addEventListener('click', hideMenu)
+})
+onUnmounted(() => {
+  document.removeEventListener('click', hideMenu)
+})
 </script>
 
 <template>
-  <div class="tool-button">
-    <button class="menu-btn flex flex-col items-center" @click="clickHandler" :disabled="disabled">
-      <slot name="icon"></slot>
-      <span class="text-xs">
-        <slot name="name"></slot>
-      </span>
+  <div class="tool-button relative">
+    <button class="menu-btn flex items-center" @click.stop="onClick" :disabled="disabled">
+      <div class="flex flex-col">
+        <slot name="icon"></slot>
+        <span class="text-xs">
+          <slot name="name"></slot>
+        </span>
+      </div>
       <Down v-if="hasMenu" class="-mt-1" theme="outline" size="17" fill="#333" :strokeWidth="2" />
     </button>
-
-    <slot name="menu"></slot>
+    <div v-if="showMenu" class="absolute left-0 top-[90px] min-w-[50px] min-h-[50px] bg-white shadow-lg border z-[1]">
+      <slot name="menu"></slot>
+    </div>
   </div>
 </template>