feat(web): adds touch support

Author: dvcol

src/components/AppComponent.vue

@@ -7,7 +7,7 @@ import {
   NFlex,
   NIcon,
 } from 'naive-ui';
-import { ref, Transition, watch } from 'vue';
+import { onBeforeUnmount, onMounted, ref, Transition, watch } from 'vue';
 import { RouterView, useRouter } from 'vue-router';
 
 import GridBackground from '~/components/common/background/GridBackground.vue';
@@ -17,6 +17,7 @@ import NavbarComponent from '~/components/common/navbar/NavbarComponent.vue';
 import IconChevronLeft from '~/components/icons/IconChevronLeft.vue';
 import IconClose from '~/components/icons/IconClose.vue';
 import CheckinComponent from '~/components/views/checkin/CheckinComponent.vue';
+import { NavbarService } from '~/services/navbar.service';
 import { useAppStateStoreRefs } from '~/stores/app-state.store';
 import { useAuthSettingsStoreRefs } from '~/stores/settings/auth.store';
 
@@ -27,9 +28,9 @@ const { footerOpen, panelOpen, panelDirty } = useAppStateStoreRefs();
 
 const base = ref();
 
-const appRef = ref();
-const mainRef = ref();
-const footerRef = ref();
+const appRef = ref<HTMLDivElement>();
+const mainRef = ref<HTMLDivElement>();
+const footerRef = ref<HTMLDivElement>();
 
 watch(
   currentRoute,
@@ -59,6 +60,13 @@ const onBack = () => {
   if (window.history.state.back) return back();
   return onClose();
 };
+
+onMounted(() => {
+  mainRef.value?.addEventListener('touchstart', NavbarService.hideDrawer);
+});
+onBeforeUnmount(() => {
+  mainRef.value?.removeEventListener('touchstart', NavbarService.hideDrawer);
+});
 </script>
 
 <template>

src/components/common/navbar/NavbarComponent.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { NTab, NTabs } from 'naive-ui';
-import { computed, ref, toRefs, useSlots } from 'vue';
+import { computed, toRefs, useSlots } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 
 import NavbarSettingsDropdown from '~/components/common/navbar/NavbarSettingsDopdown.vue';
@@ -43,8 +43,7 @@ const activeRoute = computed(() => {
   );
 });
 
-const isHover = ref(false);
-const isFocus = ref(false);
+const { isHover, isFocus, ref: navElement } = NavbarService;
 
 const hasDrawer = computed(() => {
   const drawer = !!route.name && !!slots.drawer;
@@ -57,15 +56,14 @@ const showDrawer = computed(() => {
   NavbarService.open.value = show;
   return show;
 });
-
-const navElement = ref<HTMLElement>();
 </script>
 
 <template>
   <nav
     ref="navElement"
     @mouseenter="isHover = true"
     @mouseleave="isHover = false"
+    @touchstart="isHover = true"
     @focusin="isFocus = true"
     @focusout="isFocus = false"
   >

src/components/common/navbar/NavbarSettingsDopdown.vue

@@ -130,6 +130,7 @@ const onSelect: DropdownProps['onSelect'] = async (key: string, { label }) => {
       Logger.error('Unknown key:', key);
   }
 };
+const { dropdown } = NavbarService;
 </script>
 
 <template>
@@ -141,7 +142,7 @@ const onSelect: DropdownProps['onSelect'] = async (key: string, { label }) => {
     size="small"
     class="settings-dropdown"
     :style="{ '--tab-count': enabledRoutes.length + 1 }"
-    :on-update:show="(visible: boolean) => (NavbarService.dropdown.value = visible)"
+    :on-update:show="(visible: boolean) => (dropdown = visible)"
     @select="onSelect"
   >
     <NFlex justify="space-around" align="center" :wrap="false">

src/services/navbar.service.ts

@@ -1,7 +1,15 @@
 import { ref } from 'vue';
 
 export class NavbarService {
+  static readonly ref = ref<HTMLElement>();
   static readonly open = ref(false);
   static readonly drawer = ref(false);
   static readonly dropdown = ref(false);
+  static readonly isHover = ref(false);
+  static readonly isFocus = ref(false);
+
+  static hideDrawer() {
+    NavbarService.ref.value?.blur();
+    NavbarService.ref.value?.dispatchEvent(new Event('mouseleave'));
+  }
 }