chore: Improve mobile hover behavior in navigation links

BenjaBobs · May 24, 2024 · 8d9d7c5 · 8d9d7c5
1 parent f7906b0
commit 8d9d7c5
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 4 deletions.
diff --git a/src/shared/navigation/Link.tsx b/src/shared/navigation/Link.tsx
@@ -1,21 +1,51 @@
+import { useDevice } from "@src/common/hooks/useDeviceSize";
 import { Nav } from "@src/shared/navigation/Nav";
-import { CSSProperties, PropsWithChildren } from "react";
+import { CSSProperties, PropsWithChildren, useRef } from "react";
 
 export function Link(
   props: PropsWithChildren<{
     style?: CSSProperties;
     className?: string;
     to: string;
+    onClick?: (evt: React.MouseEvent<HTMLAnchorElement>) => void;
+    preventMobileInstaClick?: boolean;
   }>
 ) {
+  const device = useDevice();
+  const data = useRef<{ hoveredAt: number }>({ hoveredAt: 0 });
+
   return (
     <a
       className={props.className}
       style={props.style}
       href={props.to}
+      onMouseEnter={
+        device === "mobile"
+          ? () => {
+              data.current.hoveredAt = new Date().getTime();
+            }
+          : undefined
+      }
+      onMouseLeave={
+        device === "mobile"
+          ? () => {
+              data.current.hoveredAt = 0;
+            }
+          : undefined
+      }
       onClick={(evt) => {
+        if (evt.isPropagationStopped() && evt.isDefaultPrevented()) return;
         evt.preventDefault();
         evt.stopPropagation();
+
+        if (
+          device === "mobile" &&
+          props.preventMobileInstaClick &&
+          new Date().getTime() - data.current.hoveredAt < 100
+        ) {
+          return;
+        }
+
         Nav.path = props.to;
       }}
     >

diff --git a/src/shared/navigation/NavLink.tsx b/src/shared/navigation/NavLink.tsx
@@ -7,6 +7,7 @@ export function NavLink(
     style?: (isMatch: boolean) => CSSProperties | undefined;
     className?: (isMatch: boolean) => string | undefined;
     to: string;
+    preventMobileInstaClick?: (isMatch: boolean) => boolean;
   }>
 ) {
   const isMatch = Nav.isStartOfCurrentPath(props.to);
@@ -16,6 +17,7 @@ export function NavLink(
       style={props.style?.(isMatch)}
       className={props.className?.(isMatch)}
       to={props.to}
+      preventMobileInstaClick={props.preventMobileInstaClick?.(isMatch)}
     >
       {props.children}
     </Link>

diff --git a/src/shared/navigation/nav-menu.scss b/src/shared/navigation/nav-menu.scss
@@ -1,5 +1,5 @@
 $duration: 0.2s;
-$delay: 0s;
+$delay: 0.1s;
 $height: 1rem;
 
 .nav-menu {
@@ -36,17 +36,18 @@ $height: 1rem;
 
   .nav-menu-branch-taken {
     font-weight: bold;
-    transition: padding-bototm $duration $delay ease-in-out;
+    transition: padding-bottom $duration $delay ease-in-out;
   }
 
   .nav-menu-branch-not-taken {
     min-height: 0;
     height: 0rem;
     max-width: 0rem;
+
     transition: height $duration $delay ease-in-out,
       transform $duration $delay ease-in-out,
       max-width $duration $delay ease-in-out,
-      padding-bototm $duration $delay ease-in-out;
+      padding-bottom $duration $delay ease-in-out;
     transform: scaleY(0);
 
     &:hover {

diff --git a/src/shared/navigation/nav-menu.tsx b/src/shared/navigation/nav-menu.tsx
@@ -76,6 +76,7 @@ function BreadCrumb(props: { routes: RouteDefinition[] }) {
           }
           key={route.fullPath}
           to={route.fullPath!}
+          preventMobileInstaClick={(isMatch) => isMatch}
         >
           {route.menu?.name}
         </NavLink>