From ddb765c4a2acb04928dd782f81d2cb5ef5748bc9 Mon Sep 17 00:00:00 2001
From: Nathan Knowler <nathan@knowler.me>
Date: Tue, 28 Feb 2023 16:01:31 -0600
Subject: [PATCH] fix(ui): make nav links unselectable on mobile (#1691)

---
 components/nav/NavBottom.vue | 14 +++++++-------
 unocss.config.ts             |  1 +
 2 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/components/nav/NavBottom.vue b/components/nav/NavBottom.vue
index c363893e..ec1109fa 100644
--- a/components/nav/NavBottom.vue
+++ b/components/nav/NavBottom.vue
@@ -13,13 +13,13 @@ const { notifications } = useNotifications()
   >
     <!-- These weird styles above are used for scroll locking, don't change it unless you know exactly what you're doing. -->
     <template v-if="currentUser">
-      <NuxtLink to="/home" :active-class="moreMenuVisible ? '' : 'text-primary'" flex flex-row items-center place-content-center h-full flex-1 @click="$scrollToTop">
+      <NuxtLink to="/home" :active-class="moreMenuVisible ? '' : 'text-primary'" flex flex-row items-center place-content-center h-full flex-1 class="coarse-pointer:select-none" @click="$scrollToTop">
         <div i-ri:home-5-line />
       </NuxtLink>
-      <NuxtLink :to="isHydrated ? `/${currentServer}/explore` : '/explore'" :active-class="moreMenuVisible ? '' : 'text-primary'" flex flex-row items-center place-content-center h-full flex-1 @click="$scrollToTop">
+      <NuxtLink :to="isHydrated ? `/${currentServer}/explore` : '/explore'" :active-class="moreMenuVisible ? '' : 'text-primary'" flex flex-row items-center place-content-center h-full flex-1 class="coarse-pointer:select-none" @click="$scrollToTop">
         <div i-ri:search-line />
       </NuxtLink>
-      <NuxtLink to="/notifications" :active-class="moreMenuVisible ? '' : 'text-primary'" flex flex-row items-center place-content-center h-full flex-1 @click="$scrollToTop">
+      <NuxtLink to="/notifications" :active-class="moreMenuVisible ? '' : 'text-primary'" flex flex-row items-center place-content-center h-full flex-1 class="coarse-pointer:select-none" @click="$scrollToTop">
         <div flex relative>
           <div class="i-ri:notification-4-line" text-xl />
           <div v-if="notifications" class="top-[-0.3rem] right-[-0.3rem]" absolute font-bold rounded-full h-4 w-4 text-xs bg-primary text-inverted flex items-center justify-center>
@@ -27,18 +27,18 @@ const { notifications } = useNotifications()
           </div>
         </div>
       </NuxtLink>
-      <NuxtLink to="/conversations" :active-class="moreMenuVisible ? '' : 'text-primary'" flex flex-row items-center place-content-center h-full flex-1 @click="$scrollToTop">
+      <NuxtLink to="/conversations" :active-class="moreMenuVisible ? '' : 'text-primary'" flex flex-row items-center place-content-center h-full flex-1 class="coarse-pointer:select-none" @click="$scrollToTop">
         <div i-ri:at-line />
       </NuxtLink>
     </template>
     <template v-else>
-      <NuxtLink :to="`/${currentServer}/explore`" :active-class="moreMenuVisible ? '' : 'text-primary'" flex flex-row items-center place-content-center h-full flex-1 @click="$scrollToTop">
+      <NuxtLink :to="`/${currentServer}/explore`" :active-class="moreMenuVisible ? '' : 'text-primary'" flex flex-row items-center place-content-center h-full flex-1 class="coarse-pointer:select-none" @click="$scrollToTop">
         <div i-ri:hashtag />
       </NuxtLink>
-      <NuxtLink group :to="`/${currentServer}/public/local`" :active-class="moreMenuVisible ? '' : 'text-primary'" flex flex-row items-center place-content-center h-full flex-1 @click="$scrollToTop">
+      <NuxtLink group :to="`/${currentServer}/public/local`" :active-class="moreMenuVisible ? '' : 'text-primary'" flex flex-row items-center place-content-center h-full flex-1 class="coarse-pointer:select-none" @click="$scrollToTop">
         <div i-ri:group-2-line />
       </NuxtLink>
-      <NuxtLink :to="`/${currentServer}/public`" :active-class="moreMenuVisible ? '' : 'text-primary'" flex flex-row items-center place-content-center h-full flex-1 @click="$scrollToTop">
+      <NuxtLink :to="`/${currentServer}/public`" :active-class="moreMenuVisible ? '' : 'text-primary'" flex flex-row items-center place-content-center h-full flex-1 class="coarse-pointer:select-none" @click="$scrollToTop">
         <div i-ri:earth-line />
       </NuxtLink>
     </template>
diff --git a/unocss.config.ts b/unocss.config.ts
index 0013a084..f32d04b9 100644
--- a/unocss.config.ts
+++ b/unocss.config.ts
@@ -122,6 +122,7 @@ export default defineConfig({
       }
     },
     variantParentMatcher('fullscreen', '@media (display-mode: fullscreen)'),
+    variantParentMatcher('coarse-pointer', '@media (pointer: coarse)'),
   ],
   rules: [
     // scrollbar-hide