From fd1a44224e414d13ca51edecf2e2e133171c82ee Mon Sep 17 00:00:00 2001
From: Prabhu <prabhu.m.murthy@gmail.com>
Date: Mon, 14 Dec 2020 19:12:21 +0530
Subject: [PATCH 1/3] =?UTF-8?q?=F0=9F=91=86=20touch=20=20support?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                      |   6 +-
 src/components/Menu.vue           |   9 ++
 src/components/MenuBar.vue        | 174 +++++++++++++++++++-----------
 src/components/MenuBarItem.scss   |  14 +--
 src/components/MenuBarItem.vue    |   5 +-
 src/components/menu.scss          |  32 +++---
 src/models/MenuBarDockPosition.ts |   3 +-
 src/utils/DragUtil.ts             |  30 ++++--
 yarn.lock                         |  24 ++---
 9 files changed, 188 insertions(+), 109 deletions(-)

diff --git a/package.json b/package.json
index f2c69bd..7d07952 100644
--- a/package.json
+++ b/package.json
@@ -50,16 +50,16 @@
     "@vue/compiler-sfc": "^3.0.4",
     "eslint": "^7.15.0",
     "eslint-plugin-vue": "^7.2.0",
-    "husky": "^4.3.5",
+    "husky": "^4.3.6",
     "lint-staged": "^10.5.3",
-    "rollup": "^2.34.2",
+    "rollup": "^2.35.0",
     "rollup-plugin-scss": "^2.6.1",
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-vue": "^6.0.0",
     "sass": "^1.30.0",
     "stylelint": "^13.8.0",
     "stylelint-config-standard": "^20.0.0",
-    "typescript": "^4.1.2",
+    "typescript": "^4.1.3",
     "vite": "^1.0.0-rc.13",
     "vue": "^3.0.4"
   },
diff --git a/src/components/Menu.vue b/src/components/Menu.vue
index 16c2328..e2f5c73 100644
--- a/src/components/Menu.vue
+++ b/src/components/Menu.vue
@@ -42,6 +42,14 @@
             disable: item.disable,
           })
         "
+        @touchstart="
+          handleSelection({
+            event: $event,
+            name: item.name,
+            isParent: !!item.menu,
+            disable: item.disable,
+          })
+        "
       >
         <template v-if="!item.isDivider">
           <span
@@ -194,6 +202,7 @@ export default defineComponent({
         name,
         path: `${props.parent}>${path ? path : name}`.toLowerCase(),
       });
+
     };
 
     const menuItemStyle = computed(() => ({
diff --git a/src/components/MenuBar.vue b/src/components/MenuBar.vue
index 8c8f704..2553ce4 100644
--- a/src/components/MenuBar.vue
+++ b/src/components/MenuBar.vue
@@ -5,12 +5,9 @@
     :draggable="draggable"
     tabindex="0"
     :style="{ background: theme.primary }"
+    @dragover="handleDragMove"
     @dragstart="handleDragStart"
-    @dragover="handleDrag"
     @dragend="handleDragEnd"
-    @touchEnd="handleDragEnd"
-    @mouseenter="handleMouseEnter"
-    @mouseleave="handleMouseLeave"
   >
     <ul
       :class="[dockClass, 'menu-bar-items']"
@@ -115,6 +112,9 @@ export default defineComponent({
     // reference to the main menubar itself
     const menuBarRef = ref<HTMLElement>();
 
+    // tracks if the drag has been started
+    const dragStart = ref(false);
+
     // tracks the drag status of the menubar
     const dragActive = ref(false);
 
@@ -155,12 +155,32 @@ export default defineComponent({
 
     const clientCoords = ref<{ x: number; y: number }>({ x: 0, y: 0 });
 
+    // activate the menu bar
+    const handleMouseEnter = () => {
+      menuBarActive.value = true;
+    };
+
+    // deactivate the menubar if active
+    const handleMouseLeave = () => {
+      if (!isMobileDevice.value && !menuActive.value) {
+        menuBarActive.value = false;
+      }
+    };
+
     const handleMenuClosure = () => {
-      menuActive.value = false;
-      menuBarActive.value = false;
-      activeMenuSelection.value = -1;
-      activeMenuBarId.value = "";
-      highlightFirstElement.value = false;
+      if (unref(menuActive) || unref(menuBarActive)) {    
+        menuActive.value = false;
+        menuBarActive.value = false;
+        activeMenuSelection.value = -1;
+        activeMenuBarId.value = "";
+        highlightFirstElement.value = false;
+
+        menuItems.value = menuItems.value.map((item) =>
+          Object.assign({}, item, {
+            showMenu: false,
+          })
+        );
+      }
     };
 
     //** Lifecylce  Methods **
@@ -178,37 +198,94 @@ export default defineComponent({
 
       // check if its a mobile device
       isMobileDevice.value = isMobile();
+      const menuBar = unref(menuBarRef);
+
+      const dragEvents = ["mousemove", "mouseenter", "mouseleave"];
+      const touchEvents = ["touchmove", "touchend", "touchstart"];
+
+      let eventSelection = [];
+
+      if (isMobileDevice.value) {
+        eventSelection = touchEvents;
+      } else {
+        eventSelection = dragEvents;
+      }
+
+      if (menuBar && eventSelection.length) {
+        menuBar.addEventListener(eventSelection[0], handleDragMove);
+        menuBar.addEventListener(eventSelection[1], handleMouseEnter);
+        menuBar.addEventListener(eventSelection[2], handleMouseLeave);
+      }
 
-      document.addEventListener("dragover", updateDragCoords);
       document.addEventListener("click", handleMenuClosure);
+      document.addEventListener("dragover", updateDragCoords);
     });
 
     // cleanup
     onUnmounted(() => {
       document.removeEventListener("dragover", updateDragCoords);
+      const menuBar = unref(menuBarRef);
+
+      const dragEvents = ["mousemove", "mouseenter", "mouseleave"];
+      const touchEvents = ["touchmove", "touchend", "touchstart"];
+
+      let eventSelection = [];
+
+      if (isMobileDevice.value) {
+        eventSelection = touchEvents;
+      } else {
+        eventSelection = dragEvents;
+      }
+
+      if (menuBar && eventSelection.length) {
+        menuBar.removeEventListener(eventSelection[0], handleDragMove);
+        menuBar.removeEventListener(eventSelection[1], handleMouseEnter);
+        menuBar.removeEventListener(eventSelection[2], handleMouseLeave);
+      }
+
       document.removeEventListener("click", handleMenuClosure);
     });
 
     const handleDragStart = (event: DragEvent | TouchEvent) => {
-      dragActive.value = true;
-
-      // close the menu during drag operation
-      menuActive.value = false;
+      if (event instanceof DragEvent) {
+        dragStart.value = true;
+        dragActive.value = false;
 
-      // set a custom ghost image while dragging
-      utils.handleDragStart(event);
+        // set a custom ghost image while dragging
+        utils.handleDragStart(event);
+      }
     };
 
     //** Drag handlers **
 
     const handleDragEnd = (event: DragEvent | TouchEvent) => {
-      const {
-        dragActive: dragActiveNew,
-        dockPosition: positionNew,
-      } = utils.handleDragEnd(event, unref(clientCoords));
+      if (!unref(dragActive)) {
+        return;
+      }
+
+      const dragEndResult = utils.handleDragEnd(event, unref(clientCoords));
+
+      if (dragEndResult) {
+        const {
+          dragActive: dragActiveNew,
+          dockPosition: positionNew,
+        } = dragEndResult;
+
+        dragActive.value = dragActiveNew;
+        dockPosition.value = positionNew;
+      }
+
+      dragStart.value = false;
+      dragActive.value = false;
+    };
 
-      dragActive.value = dragActiveNew;
-      dockPosition.value = positionNew;
+    const handleDragMove = (event: any) => {
+      if (dragStart.value) {
+        dragActive.value = true;
+
+        // close the menu during drag operation
+        menuActive.value = false;
+      }
     };
 
     const handleDrag = (event: DragEvent) => {
@@ -244,18 +321,6 @@ export default defineComponent({
       }
     };
 
-    const handleBlur = () => {
-      menuActive.value = false;
-      menuBarActive.value = false;
-      highlightFirstElement.value = false;
-
-      menuItems.value = menuItems.value.map((item) =>
-        Object.assign({}, item, {
-          showMenu: false,
-        })
-      );
-    };
-
     //** computed methods */
 
     // convert to a sidebar when docked to either left or right
@@ -270,26 +335,13 @@ export default defineComponent({
 
     //** final selection handler */
     const handleSelected = (data: any) => {
+      handleMenuClosure();
       menuActive.value = false;
       props.onSelected(data);
     };
 
     //** keyboard handlers  **
 
-    // activate the menu bar
-    const handleMouseEnter = () => {
-      if (!isMobileDevice.value) {
-        menuBarActive.value = true;
-      }
-    };
-
-    // deactivate the menubar if active
-    const handleMouseLeave = () => {
-      if (!isMobileDevice.value && !menuActive.value) {
-        menuBarActive.value = false;
-      }
-    };
-
     // activates the menu via keyboard
     const handleActivateDir = (id: string, dir: "prev" | "next") => {
       const eleIndex = menuItems.value.findIndex((item) => item.id === id);
@@ -341,30 +393,30 @@ export default defineComponent({
     };
 
     return {
+      activeMenuBarId,
+      activeMenuSelection,
       barHeight,
       barWidth,
       dockClass,
       dockPosition,
+      expandClass,
+      handleActivateDir,
+      handleActivateMenu,
+      handleDrag,
+      handleDragCancel,
       handleDragEnd,
+      handleDragMove,
       handleDragStart,
-      handleOnShowMenu,
-      handleActivateMenu,
       handleMouseEnter,
       handleMouseLeave,
-      handleBlur,
+      handleOnShowMenu,
+      handleSelected,
+      highlightFirstElement,
+      isMobileDevice,
       menuActive,
+      menuBarActive,
       menuBarRef,
       menuItems,
-      handleDragCancel,
-      expandClass,
-      menuBarActive,
-      isMobileDevice,
-      handleDrag,
-      handleActivateDir,
-      activeMenuSelection,
-      activeMenuBarId,
-      handleSelected,
-      highlightFirstElement,
     };
   },
 });
diff --git a/src/components/MenuBarItem.scss b/src/components/MenuBarItem.scss
index a263790..60adcb4 100644
--- a/src/components/MenuBarItem.scss
+++ b/src/components/MenuBarItem.scss
@@ -1,9 +1,9 @@
 .menu-bar-item-container {
   align-items: center;
+  cursor: pointer;
   display: flex;
   justify-content: center;
   position: relative;
-  cursor: pointer;
 
   &:focus {
     outline: 0;
@@ -32,32 +32,32 @@
 }
 
 .name-container {
-  text-transform: capitalize;
   font-size: 0.95rem;
   margin: 0.25rem 0;
-  white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  text-transform: capitalize;
+  white-space: nowrap;
 
   &.left,
   &.right {
     align-items: center;
+    background: none;
     display: flex;
     font-size: 1rem;
-    background: none;
-    width: 100%;
-    justify-content: flex-start;
     height: 1.5rem;
+    justify-content: flex-start;
+    width: 100%;
 
     &.expanded {
       padding-left: 1rem;
     }
 
     &:not(.expanded) {
-      width: 2rem;
       font-size: 1.1rem;
       justify-content: center;
       text-transform: uppercase;
+      width: 2rem;
     }
   }
 }
diff --git a/src/components/MenuBarItem.vue b/src/components/MenuBarItem.vue
index 186a4ac..316cad1 100644
--- a/src/components/MenuBarItem.vue
+++ b/src/components/MenuBarItem.vue
@@ -137,8 +137,7 @@ export default defineComponent({
     "highlight-menu-item",
     "select-highlighted-menu-item",
   ],
-  setup(props, { emit,  slots }) {
-    console.log(slots);
+  setup(props, { emit }) {
     const menuBarItemRef = ref<HTMLDivElement>();
     const menuBarItemActive = ref();
     const menuStyle = ref();
@@ -242,6 +241,8 @@ export default defineComponent({
     const bgColor = computed(() => {
       if (menuBarItemActive.value) {
         return props.theme.secondary;
+      } else {
+        return "transparent";
       }
     });
 
diff --git a/src/components/menu.scss b/src/components/menu.scss
index 7f7a4b3..4581dab 100644
--- a/src/components/menu.scss
+++ b/src/components/menu.scss
@@ -1,22 +1,22 @@
 .menu-wrapper {
-  display: flex;
   align-items: flex-start;
+  display: flex;
   justify-content: center;
   min-width: 200px;
   padding: 0.5rem 0;
 }
 
 .menu-items {
-  list-style: none;
+  align-items: flex-start;
   display: flex;
   flex-direction: column;
-  align-items: flex-start;
+  height: 100%;
   justify-content: flex-start;
-  padding: 0;
+  list-style: none;
   margin: 0;
-  width: 100%;
-  height: 100%;
   outline: 0;
+  padding: 0;
+  width: 100%;
 }
 
 .icon-wrap {
@@ -29,12 +29,12 @@
 }
 
 .menu-item-icon {
-  height: 20px;
-  width: 20px;
-  display: flex;
   align-items: center;
+  display: flex;
+  height: 20px;
   justify-content: center;
   margin: 0 2px 0 6px;
+  width: 20px;
 }
 
 .menu-item {
@@ -80,19 +80,19 @@
   &.right {
     .name {
       order: 2;
-      text-align: right;
       padding-right: 5%;
+      text-align: right;
     }
 
     .icon-wrap {
-      order: 1;
       margin-right: auto;
+      order: 1;
       transform: rotate(180deg);
     }
 
     .menu-item-icon {
-      order: 3;
       margin: 0 6px 0 2px;
+      order: 3;
     }
   }
 
@@ -119,11 +119,11 @@
 }
 
 .menu-item-divider {
-  width: 90%;
-  margin: 0 auto;
-  height: 1px;
   background: rgba(0, 0, 0, 0.1);
   display: block;
-  margin-top: 6px;
+  height: 1px;
+  margin: 0 auto;
   margin-bottom: 6px;
+  margin-top: 6px;
+  width: 90%;
 }
diff --git a/src/models/MenuBarDockPosition.ts b/src/models/MenuBarDockPosition.ts
index a5c9597..a69b956 100644
--- a/src/models/MenuBarDockPosition.ts
+++ b/src/models/MenuBarDockPosition.ts
@@ -2,7 +2,8 @@
   TOP = "TOP",
   LEFT = "LEFT",
   BOTTOM = "BOTTOM",
-  RIGHT = "RIGHT"
+  RIGHT = "RIGHT",
+  NOT_AVAILABLE = "NOT_AVAILABLE"
 }
 
 export default MenuBarDockPosition;
\ No newline at end of file
diff --git a/src/utils/DragUtil.ts b/src/utils/DragUtil.ts
index d4015df..d97b36f 100644
--- a/src/utils/DragUtil.ts
+++ b/src/utils/DragUtil.ts
@@ -7,7 +7,7 @@ interface Coordinates {
 let handleDragEnd: (event: DragEvent | TouchEvent, clientCoordinates: Coordinates) => ({
   dragActive: boolean,
   dockPosition: MenuBarDockPosition
-});
+}) | null;
 
 handleDragEnd = (event: DragEvent | TouchEvent, clientCoordinates: Coordinates) => {
   const winHeight = window.innerHeight;
@@ -18,18 +18,24 @@ handleDragEnd = (event: DragEvent | TouchEvent, clientCoordinates: Coordinates)
 
   let value = {
     dragActive: false,
-    dockPosition: MenuBarDockPosition.TOP
+    dockPosition: MenuBarDockPosition.NOT_AVAILABLE
   }
 
   if (event instanceof DragEvent) {
     xThreshold = Math.round((x / winWidth) * 100);
     yThreshold = Math.round((y / winHeight) * 100);
   } else if (event instanceof TouchEvent) {
-    const { clientX, clientY } = event.touches[0];
-    xThreshold = Math.round((clientX / winWidth) * 100);
-    yThreshold = Math.round((clientY / winHeight) * 100);
+    const touches = event.changedTouches[0];
+    if (touches) {
+      const { clientX, clientY } = touches;
+      xThreshold = Math.round((clientX / winWidth) * 100);
+      yThreshold = Math.round((clientY / winHeight) * 100);
+    }
   }
 
+  console.log(yThreshold)
+  console.log(xThreshold)
+
   if (xThreshold < 10) {
     value.dockPosition = MenuBarDockPosition.LEFT;
   }
@@ -46,7 +52,14 @@ handleDragEnd = (event: DragEvent | TouchEvent, clientCoordinates: Coordinates)
     value.dockPosition = MenuBarDockPosition.TOP;
   }
 
-  return value;
+  console.log(value);
+
+  if (value.dockPosition !== MenuBarDockPosition.NOT_AVAILABLE) {
+    return value;
+  } else {
+    return null;
+  }
+
 }
 
 
@@ -57,7 +70,10 @@ handleDragStart = (event: DragEvent | TouchEvent) => {
   if (event instanceof DragEvent) {
     const img = new Image();
     img.src =
-      "data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=";
+      `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAsQAAALEBxi1JjQAAABl0RVh0U29mdHdhcmUAd3d3Lmlua
+      3NjYXBlLm9yZ5vuPBoAAAEFSURBVEiJ7dS9SgNBFIbhJymyWqRVay8ihT+FP42NlhZaewlW4lXkMsQuBDsLwUILKwstBAMiYilCMBCLHUHWjTujEZu8MPDN7sx5D5xlmfDf1CreZ9gN+RntkPfQ
+      HYfgKEhqWMU66jhGP1VWRj8IMrx9ej7EApbwhF5YG6mCYWT+kN3HFN3Ehbz7WEFZLmULd1hD4y8El/Jhll24iciVgldMj7gcQ6XgEbOJRb8V1Av7HuZ/IfhCUXCKlXEKiiziukQcS+UM4BzbPyie
+      YRBzsIUHzCUKWhK+un1cYSZB0MFhSkcH8n/LDpojzjTknXdwhqkUASzjBC/yARbXALeh8+TiE8A7L6BCi4Gh1q4AAAAASUVORK5CYII=`;
     event.dataTransfer?.setDragImage(img, 0, 0);
   }
 };
diff --git a/yarn.lock b/yarn.lock
index da48bda..91d6001 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2245,10 +2245,10 @@ human-signals@^1.1.1:
   resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-1.1.1.tgz#c5b1cd14f50aeae09ab6c59fe63ba3395fe4dfa3"
   integrity sha512-SEQu7vl8KjNL2eoGBLF3+wAjpsNfA9XMlXAYj/3EdaNfAlxKthD1xjEQfGOUhllCGGJVNY34bRr6lPINhNjyZw==
 
-husky@^4.3.5:
-  version "4.3.5"
-  resolved "https://registry.yarnpkg.com/husky/-/husky-4.3.5.tgz#ab8d2a0eb6b62fef2853ee3d442c927d89290902"
-  integrity sha512-E5S/1HMoDDaqsH8kDF5zeKEQbYqe3wL9zJDyqyYqc8I4vHBtAoxkDBGXox0lZ9RI+k5GyB728vZdmnM4bYap+g==
+husky@^4.3.6:
+  version "4.3.6"
+  resolved "https://registry.yarnpkg.com/husky/-/husky-4.3.6.tgz#ebd9dd8b9324aa851f1587318db4cccb7665a13c"
+  integrity sha512-o6UjVI8xtlWRL5395iWq9LKDyp/9TE7XMOTvIpEVzW638UcGxTmV5cfel6fsk/jbZSTlvfGVJf2svFtybcIZag==
   dependencies:
     chalk "^4.0.0"
     ci-info "^2.0.0"
@@ -4053,10 +4053,10 @@ rollup@^2.32.1:
   optionalDependencies:
     fsevents "~2.1.2"
 
-rollup@^2.34.2:
-  version "2.34.2"
-  resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.34.2.tgz#fa73e05c64df587e9ed4dc80d7d4e7d4a43f8908"
-  integrity sha512-mvtQLqu3cNeoctS+kZ09iOPxrc1P1/Bt1z15enuQ5feyKOdM3MJAVFjjsygurDpSWn530xB4AlA83TWIzRstXA==
+rollup@^2.35.0:
+  version "2.35.0"
+  resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.35.0.tgz#47b77827b122fbeca6a2c494fb2258db73d04fa9"
+  integrity sha512-AkiRsGBlHbP+bnAcOgiCRp6jm0BEGHXJk7TGZ+GpKyTL3EiSv+v+zEHlaB1gy1Ql2zyblBhzo5X346bCL45OAg==
   optionalDependencies:
     fsevents "~2.1.2"
 
@@ -4753,10 +4753,10 @@ typedarray-to-buffer@^3.1.5:
   dependencies:
     is-typedarray "^1.0.0"
 
-typescript@^4.1.2:
-  version "4.1.2"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.1.2.tgz#6369ef22516fe5e10304aae5a5c4862db55380e9"
-  integrity sha512-thGloWsGH3SOxv1SoY7QojKi0tc+8FnOmiarEGMbd/lar7QOEd3hvlx3Fp5y6FlDUGl9L+pd4n2e+oToGMmhRQ==
+typescript@^4.1.3:
+  version "4.1.3"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.1.3.tgz#519d582bd94cba0cf8934c7d8e8467e473f53bb7"
+  integrity sha512-B3ZIOf1IKeH2ixgHhj6la6xdwR9QrLC5d1VKeCSY4tvkqhF2eqd9O7txNlS0PO3GrBAFIdr3L1ndNwteUbZLYg==
 
 unicode-canonical-property-names-ecmascript@^1.0.4:
   version "1.0.4"

From 02139659886add927787da82969fa3320138fdf2 Mon Sep 17 00:00:00 2001
From: Prabhu <prabhu.m.murthy@gmail.com>
Date: Tue, 15 Dec 2020 01:22:04 +0530
Subject: [PATCH 2/3] minor refactor

---
 src/components/Menu.vue        |  2 +-
 src/components/MenuBar.vue     | 69 +++++++++++++---------------------
 src/components/MenuBarItem.vue | 49 +++++++++++++++++++++---
 src/models/MenuBarItemModel.ts |  1 +
 src/utils/DragUtil.ts          | 10 ++---
 5 files changed, 78 insertions(+), 53 deletions(-)

diff --git a/src/components/Menu.vue b/src/components/Menu.vue
index e2f5c73..694d078 100644
--- a/src/components/Menu.vue
+++ b/src/components/Menu.vue
@@ -42,7 +42,7 @@
             disable: item.disable,
           })
         "
-        @touchstart="
+        @touchend="
           handleSelection({
             event: $event,
             name: item.name,
diff --git a/src/components/MenuBar.vue b/src/components/MenuBar.vue
index 2553ce4..86a4f90 100644
--- a/src/components/MenuBar.vue
+++ b/src/components/MenuBar.vue
@@ -8,6 +8,9 @@
     @dragover="handleDragMove"
     @dragstart="handleDragStart"
     @dragend="handleDragEnd"
+    @touchstart="handleDragStart"
+    @touchmove="handleDragMove"
+    @touchend="handleDragEnd"
   >
     <ul
       :class="[dockClass, 'menu-bar-items']"
@@ -168,18 +171,12 @@ export default defineComponent({
     };
 
     const handleMenuClosure = () => {
-      if (unref(menuActive) || unref(menuBarActive)) {    
-        menuActive.value = false;
+      if (unref(menuActive) || unref(menuBarActive)) {
         menuBarActive.value = false;
+        menuActive.value = false;
         activeMenuSelection.value = -1;
         activeMenuBarId.value = "";
         highlightFirstElement.value = false;
-
-        menuItems.value = menuItems.value.map((item) =>
-          Object.assign({}, item, {
-            showMenu: false,
-          })
-        );
       }
     };
 
@@ -200,60 +197,49 @@ export default defineComponent({
       isMobileDevice.value = isMobile();
       const menuBar = unref(menuBarRef);
 
-      const dragEvents = ["mousemove", "mouseenter", "mouseleave"];
-      const touchEvents = ["touchmove", "touchend", "touchstart"];
-
-      let eventSelection = [];
-
       if (isMobileDevice.value) {
-        eventSelection = touchEvents;
+        if (menuBar) {
+          // menuBar.addEventListener('touchmove', handleDragMove);
+        }
+        document.addEventListener("touchend", handleMenuClosure);
       } else {
-        eventSelection = dragEvents;
-      }
+        document.addEventListener("click", handleMenuClosure);
 
-      if (menuBar && eventSelection.length) {
-        menuBar.addEventListener(eventSelection[0], handleDragMove);
-        menuBar.addEventListener(eventSelection[1], handleMouseEnter);
-        menuBar.addEventListener(eventSelection[2], handleMouseLeave);
+        if(menuBar)  {
+          menuBar.addEventListener('mouseenter', handleMouseEnter);
+          menuBar.addEventListener('mouseleave', handleMouseLeave);
+        }
       }
 
-      document.addEventListener("click", handleMenuClosure);
       document.addEventListener("dragover", updateDragCoords);
     });
 
     // cleanup
     onUnmounted(() => {
       document.removeEventListener("dragover", updateDragCoords);
-      const menuBar = unref(menuBarRef);
 
-      const dragEvents = ["mousemove", "mouseenter", "mouseleave"];
-      const touchEvents = ["touchmove", "touchend", "touchstart"];
-
-      let eventSelection = [];
+      const menuBar = unref(menuBarRef);
 
       if (isMobileDevice.value) {
-        eventSelection = touchEvents;
+        document.removeEventListener("touchend", handleMenuClosure);
       } else {
-        eventSelection = dragEvents;
-      }
+        document.removeEventListener("click", handleMenuClosure);
 
-      if (menuBar && eventSelection.length) {
-        menuBar.removeEventListener(eventSelection[0], handleDragMove);
-        menuBar.removeEventListener(eventSelection[1], handleMouseEnter);
-        menuBar.removeEventListener(eventSelection[2], handleMouseLeave);
+        if(menuBar)  {
+          menuBar.removeEventListener('mouseenter', handleMouseEnter);
+          menuBar.removeEventListener('mouseleave', handleMouseLeave);
+        }
       }
 
-      document.removeEventListener("click", handleMenuClosure);
+      document.removeEventListener("dragover", updateDragCoords);
     });
 
     const handleDragStart = (event: DragEvent | TouchEvent) => {
-      if (event instanceof DragEvent) {
-        dragStart.value = true;
-        dragActive.value = false;
+      dragStart.value = true;
+      dragActive.value = false;
 
-        // set a custom ghost image while dragging
-        utils.handleDragStart(event);
-      }
+      // set a custom ghost image while dragging
+      utils.handleDragStart(event);
     };
 
     //** Drag handlers **
@@ -279,7 +265,7 @@ export default defineComponent({
       dragActive.value = false;
     };
 
-    const handleDragMove = (event: any) => {
+    const handleDragMove = () => {
       if (dragStart.value) {
         dragActive.value = true;
 
@@ -336,7 +322,6 @@ export default defineComponent({
     //** final selection handler */
     const handleSelected = (data: any) => {
       handleMenuClosure();
-      menuActive.value = false;
       props.onSelected(data);
     };
 
diff --git a/src/components/MenuBarItem.vue b/src/components/MenuBarItem.vue
index 316cad1..96dbdda 100644
--- a/src/components/MenuBarItem.vue
+++ b/src/components/MenuBarItem.vue
@@ -6,7 +6,6 @@
     tabindex="0"
     @mouseenter="setMenuViewable()"
     @keyup="handleKeyUp"
-    @click="toggleMenu"
   >
     <span
       :class="[...menuBarStyle, 'name-container']"
@@ -56,9 +55,11 @@ import {
   onMounted,
   nextTick,
   unref,
+  onUnmounted,
 } from "vue";
 import Menu from "./Menu.vue";
 import { MenuTheme } from "@/models/Theme";
+import isMobileDevice from "./isMobileDevice";
 
 export default defineComponent({
   name: "MenuBarItem",
@@ -139,8 +140,10 @@ export default defineComponent({
   ],
   setup(props, { emit }) {
     const menuBarItemRef = ref<HTMLDivElement>();
-    const menuBarItemActive = ref();
+    const menuBarItemActive = ref(false);
     const menuStyle = ref();
+    const isMobile = ref(isMobileDevice());
+    const menuOpen = ref(false);
 
     const getName = computed(() => {
       if (
@@ -157,9 +160,10 @@ export default defineComponent({
     const setMenuViewable = () => emit("activate", props.id);
 
     // toggle menu
-    const toggleMenu = (event: MouseEvent) => {
+    const toggleMenu = (event: MouseEvent | TouchEvent) => {
       event.stopPropagation();
-      emit("show", !props.menuActive, props.id);
+      menuOpen.value = !menuOpen.value;
+      emit("show", menuOpen.value, props.id);
     };
 
     const handleMenuSelection = ($event: any) => props.onSelected($event);
@@ -209,6 +213,7 @@ export default defineComponent({
       (newValue) => {
         menuBarItemActive.value = newValue;
         if (newValue) {
+          menuOpen.value = false;
           nextTick(() => menuBarItemRef.value?.focus());
         }
       }
@@ -236,7 +241,41 @@ export default defineComponent({
       }
     );
 
-    onMounted(() => computeMenuStyle());
+    onMounted(() => {
+      computeMenuStyle();
+      const menuBarItem = unref(menuBarItemRef);
+      const mobile = unref(isMobile);
+
+      if (!menuBarItem) {
+        return;
+      }
+
+      if (mobile) {
+        menuBarItem.addEventListener("touchend", (ev) => {
+          setMenuViewable();
+          nextTick(() => {
+            toggleMenu(ev);
+          });
+        });
+      } else {
+        menuBarItem.addEventListener("click", toggleMenu);
+      }
+    });
+
+    onUnmounted(() => {
+      const menuBarItem = unref(menuBarItemRef);
+      const mobile = unref(isMobile);
+
+      if (!menuBarItem) {
+        return;
+      }
+
+      if (mobile) {
+        menuBarItem.removeEventListener("touchstart", toggleMenu);
+      } else {
+        menuBarItem.removeEventListener("mousedown", toggleMenu);
+      }
+    });
 
     const bgColor = computed(() => {
       if (menuBarItemActive.value) {
diff --git a/src/models/MenuBarItemModel.ts b/src/models/MenuBarItemModel.ts
index 2b83ccc..a4c8faf 100644
--- a/src/models/MenuBarItemModel.ts
+++ b/src/models/MenuBarItemModel.ts
@@ -5,4 +5,5 @@ export interface MenuBarItemModel {
   id?: string;
   onSelect?: (id: string) => void;
   menu?: MenuItemModel[];
+  showMenu?:  boolean;
 }
\ No newline at end of file
diff --git a/src/utils/DragUtil.ts b/src/utils/DragUtil.ts
index d97b36f..f5bb7c4 100644
--- a/src/utils/DragUtil.ts
+++ b/src/utils/DragUtil.ts
@@ -69,11 +69,11 @@ handleDragStart = (event: DragEvent | TouchEvent) => {
   // set a custom ghost image while dragging
   if (event instanceof DragEvent) {
     const img = new Image();
-    img.src =
-      `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAsQAAALEBxi1JjQAAABl0RVh0U29mdHdhcmUAd3d3Lmlua
-      3NjYXBlLm9yZ5vuPBoAAAEFSURBVEiJ7dS9SgNBFIbhJymyWqRVay8ihT+FP42NlhZaewlW4lXkMsQuBDsLwUILKwstBAMiYilCMBCLHUHWjTujEZu8MPDN7sx5D5xlmfDf1CreZ9gN+RntkPfQ
-      HYfgKEhqWMU66jhGP1VWRj8IMrx9ej7EApbwhF5YG6mCYWT+kN3HFN3Ehbz7WEFZLmULd1hD4y8El/Jhll24iciVgldMj7gcQ6XgEbOJRb8V1Av7HuZ/IfhCUXCKlXEKiiziukQcS+UM4BzbPyie
-      YRBzsIUHzCUKWhK+un1cYSZB0MFhSkcH8n/LDpojzjTknXdwhqkUASzjBC/yARbXALeh8+TiE8A7L6BCi4Gh1q4AAAAASUVORK5CYII=`;
+    // img.src =
+    //   `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAsQAAALEBxi1JjQAAABl0RVh0U29mdHdhcmUAd3d3Lmlua
+    //   3NjYXBlLm9yZ5vuPBoAAAEFSURBVEiJ7dS9SgNBFIbhJymyWqRVay8ihT+FP42NlhZaewlW4lXkMsQuBDsLwUILKwstBAMiYilCMBCLHUHWjTujEZu8MPDN7sx5D5xlmfDf1CreZ9gN+RntkPfQ
+    //   HYfgKEhqWMU66jhGP1VWRj8IMrx9ej7EApbwhF5YG6mCYWT+kN3HFN3Ehbz7WEFZLmULd1hD4y8El/Jhll24iciVgldMj7gcQ6XgEbOJRb8V1Av7HuZ/IfhCUXCKlXEKiiziukQcS+UM4BzbPyie
+    //   YRBzsIUHzCUKWhK+un1cYSZB0MFhSkcH8n/LDpojzjTknXdwhqkUASzjBC/yARbXALeh8+TiE8A7L6BCi4Gh1q4AAAAASUVORK5CYII=`;
     event.dataTransfer?.setDragImage(img, 0, 0);
   }
 };

From 358c14bbe7dcf4256382a93cd5b84b58bab96162 Mon Sep 17 00:00:00 2001
From: Prabhu <prabhu.m.murthy@gmail.com>
Date: Tue, 15 Dec 2020 01:39:04 +0530
Subject: [PATCH 3/3] update sample and readme

---
 README.md                     | 1 +
 src/components/HelloWorld.vue | 6 +++---
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index 87a1f85..dcaa2d7 100644
--- a/README.md
+++ b/README.md
@@ -19,6 +19,7 @@
 
 - ⚓ &nbsp;Dock your menu with ease.
 - 🤏 &nbsp;Dock the Menubar by dragging and dropping to the edges of the screen.
+- 👆 &nbsp;Touch support.
 - 👍 &nbsp;Support for nested menus up to any levels.
 - 👓&nbsp; The Menus adjust to any docked position and enables an intuitive menu navigation.
 - ⌨&nbsp; Keyboard Accessible.
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
index 28a1dca..7f9ef5d 100644
--- a/src/components/HelloWorld.vue
+++ b/src/components/HelloWorld.vue
@@ -3,9 +3,9 @@
     :items="items"
     :on-selected="selected"
     :theme="{
-      primary: '#b2b2b2',
-      secondary: '#e5e5e5',
-      tertiary: '#008ecc',
+      primary: '#51A2D9',
+      secondary: '#B9E5F3',
+      tertiary: '#53C0F0',
       textColor: '#000',
       textHoverColor: '#fff',
     }"