Fix Menu Tiles

api/web/src/components/CloudTAK/MainMenu.vue

@@ -87,7 +87,7 @@ watch(menuWidth, () => {
     mapStore.toastOffset.x = menuWidth.value + 10;
 });
 
-watch(resize, () => {
+watch(resize, (newVal, oldVal, onCleanup) => {
     if (resize.value && container.value && menu.value) {
         resizing.value = false;
 
@@ -95,42 +95,69 @@ watch(resize, () => {
         let beginX = resize.value.getBoundingClientRect().x;
         let deltaX = 0;
 
-        resize.value.addEventListener("mousedown", () => {
+        const onStart = (clientX: number) => {
             if (!resize.value) return;
             beginWidth = menuWidth.value;
             beginX = resize.value.getBoundingClientRect().x;
             deltaX = 0;
             resizing.value = true;
-        });
+        };
 
-        menu.value.addEventListener("mousemove", (e) => {
-            deltaX = beginX - e.x;
+        const onMove = (clientX: number, e: Event) => {
+            deltaX = beginX - clientX;
 
             if (resizing.value) {
                 menuWidth.value = beginWidth + deltaX;
                 e.preventDefault();
             }
-        });
+        };
 
-        container.value.addEventListener("mousemove", (e) => {
-            deltaX = beginX - e.x;
-
-            if (resizing.value) {
-                menuWidth.value = beginWidth + deltaX;
-                e.preventDefault();
-            }
-        });
-
-        resize.value.addEventListener("mouseup", () => {
+        const onEnd = () => {
             resizing.value = false;
-        });
+        };
 
-        menu.value.addEventListener("mouseup", () => {
-            resizing.value = false;
-        });
+        const onMouseDown = (e: MouseEvent) => onStart(e.clientX);
+        const onMouseMove = (e: MouseEvent) => onMove(e.clientX, e);
+        const onMouseUp = () => onEnd();
 
-        container.value.addEventListener("mouseup", () => {
-            resizing.value = false;
+        const onTouchStart = (e: TouchEvent) => onStart(e.touches[0].clientX);
+        const onTouchMove = (e: TouchEvent) => onMove(e.touches[0].clientX, e);
+        const onTouchEnd = () => onEnd();
+
+        const resizeEl = resize.value;
+        const menuEl = menu.value;
+        const containerEl = container.value;
+
+        resizeEl.addEventListener("mousedown", onMouseDown);
+        resizeEl.addEventListener("touchstart", onTouchStart);
+        resizeEl.addEventListener("mouseup", onMouseUp);
+        resizeEl.addEventListener("touchend", onTouchEnd);
+
+        menuEl.addEventListener("mousemove", onMouseMove);
+        menuEl.addEventListener("touchmove", onTouchMove);
+        menuEl.addEventListener("mouseup", onMouseUp);
+        menuEl.addEventListener("touchend", onTouchEnd);
+
+        containerEl.addEventListener("mousemove", onMouseMove);
+        containerEl.addEventListener("touchmove", onTouchMove);
+        containerEl.addEventListener("mouseup", onMouseUp);
+        containerEl.addEventListener("touchend", onTouchEnd);
+
+        onCleanup(() => {
+            resizeEl.removeEventListener("mousedown", onMouseDown);
+            resizeEl.removeEventListener("touchstart", onTouchStart);
+            resizeEl.removeEventListener("mouseup", onMouseUp);
+            resizeEl.removeEventListener("touchend", onTouchEnd);
+
+            menuEl.removeEventListener("mousemove", onMouseMove);
+            menuEl.removeEventListener("touchmove", onTouchMove);
+            menuEl.removeEventListener("mouseup", onMouseUp);
+            menuEl.removeEventListener("touchend", onTouchEnd);
+
+            containerEl.removeEventListener("mousemove", onMouseMove);
+            containerEl.removeEventListener("touchmove", onTouchMove);
+            containerEl.removeEventListener("mouseup", onMouseUp);
+            containerEl.removeEventListener("touchend", onTouchEnd);
         });
     }
 })

api/web/src/components/CloudTAK/Menu/MenuItemCard.vue

@@ -6,16 +6,22 @@
         @click='$emit("select")'
         @keyup.enter='$emit("select")'
     >
-        <component
-            :is='icon'
-            v-if='icon'
-            v-tooltip='tooltipBinding'
-            :title='tooltip'
-            :size='iconSize'
-            :color='iconColor'
-            stroke='1'
-            class='menu-item-card__icon'
-        />
+        <div class='menu-item-card__icon-wrapper'>
+            <component
+                :is='icon'
+                v-if='icon'
+                v-tooltip='tooltipBinding'
+                :title='tooltip'
+                :size='iconSize'
+                :color='iconColor'
+                stroke='1'
+                class='menu-item-card__icon'
+            />
+            <span
+                v-if='layout === "tiles" && badge'
+                class='menu-item-card__badge menu-item-card__badge--tile-icon'
+            >{{ badge }}</span>
+        </div>
 
         <span
             v-if='compact && badge'
@@ -35,10 +41,7 @@
                     >
                         {{ description }}
                     </div>
-                    <span
-                        v-if='badge'
-                        class='menu-item-card__badge menu-item-card__badge--tile'
-                    >{{ badge }}</span>
+
                 </div>
             </template>
             <template v-else-if='compact'>
@@ -175,6 +178,29 @@ const tooltipBinding = computed(() => props.tooltip ? { content: props.tooltip,
     padding: 0.5rem 0.75rem;
 }
 
+.menu-item-card__icon-wrapper {
+    position: relative;
+    display: flex;
+    flex-shrink: 0;
+}
+
+.menu-item-card__badge--tile-icon {
+    position: absolute;
+    top: -4px;
+    right: -6px;
+    min-width: 16px;
+    height: 16px;
+    border-radius: 999px;
+    font-size: 10px;
+    background: #228be6;
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0 3px;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+}
+
 .menu-item-card__icon {
     flex-shrink: 0;
 }
@@ -212,12 +238,7 @@ const tooltipBinding = computed(() => props.tooltip ? { content: props.tooltip,
     border-radius: 999px;
 }
 
-.menu-item-card__badge--tile {
-    border: 1px solid rgba(99, 137, 255, 0.9);
-    background-color: rgba(99, 137, 255, 0.25);
-    color: #fff;
-    margin-top: 0.5rem;
-}
+
 
 .menu-item-card__badge--admin {
     border: 1px solid rgba(99, 137, 255, 0.9);