From 9e324150c419392741445905773ce2df2bdd331e Mon Sep 17 00:00:00 2001 From: MartinBraquet Date: Fri, 16 Jan 2026 14:29:48 +0100 Subject: [PATCH] Disable sidebar open on swipe for now --- web/components/nav/bottom-nav-bar.tsx | 140 +++++++++++++------------- 1 file changed, 70 insertions(+), 70 deletions(-) diff --git a/web/components/nav/bottom-nav-bar.tsx b/web/components/nav/bottom-nav-bar.tsx index d30ad83..0abe29c 100644 --- a/web/components/nav/bottom-nav-bar.tsx +++ b/web/components/nav/bottom-nav-bar.tsx @@ -2,7 +2,7 @@ import Link from 'next/link' import clsx from 'clsx' import {MenuAlt3Icon} from '@heroicons/react/solid' import {Dialog, Transition} from '@headlessui/react' -import {Fragment, useEffect, useRef, useState} from 'react' +import {Fragment, useState} from 'react' import {useRouter} from 'next/router' import Sidebar from './sidebar' import {Item} from './sidebar-item' @@ -13,7 +13,6 @@ import {trackCallback} from 'web/lib/service/analytics' import {User} from 'common/user' import {Col} from 'web/components/layout/col' import {useProfile} from 'web/hooks/use-profile' -import {useIsMobile} from "web/hooks/use-is-mobile" import {useT} from "web/lib/locale"; const itemClass = @@ -194,75 +193,76 @@ export function MobileSidebar(props: { }) { const {sidebarOpen, sidebarNavigationOptions, setSidebarOpen} = props + // TODO: before uncommenting, prevent sidebar from opening for some horizontal swipe like slider filters (age, etc.) and move around stats plot // Touch gesture handlers to open/close the mobile sidebar on any page - const touchStartX = useRef(null) - const touchStartY = useRef(null) - const gestureHandled = useRef(false) - const isMobile = useIsMobile(1024) // for lg threshold, like in BottomNavBar vs Sidebar - - const HORIZONTAL_THRESHOLD = 50 // px required to count as swipe - // const EDGE_START_MAX = 30 // px from left edge to allow open gesture - - // Prefer global pointer events so gestures work even if a child intercepts touches - useEffect(() => { - if (!isMobile) return - - const onPointerDown = (e: PointerEvent) => { - // console.log("onPointerDown") - if (!['touch', 'mouse'].includes(e.pointerType)) return - touchStartX.current = e.clientX - touchStartY.current = e.clientY - gestureHandled.current = false - } - - const onPointerMove = (e: PointerEvent) => { - // console.log("onPointerMove") - if (!['touch', 'mouse'].includes(e.pointerType)) return - if (gestureHandled.current) return - if (touchStartX.current == null) return - const deltaX = e.clientX - touchStartX.current - const deltaY = e.clientY - (touchStartY.current ?? 0) - - // Ignore primarily vertical gestures - if (Math.abs(deltaY) > Math.abs(deltaX)) return - - if (!sidebarOpen) { - // console.log("checking opening") - // Open gesture: swipe right starting from the very left edge - if (deltaX > HORIZONTAL_THRESHOLD) { - e.preventDefault() - gestureHandled.current = true - setSidebarOpen(true) - } - } else { - // Close gesture: swipe left anywhere - if (deltaX < -HORIZONTAL_THRESHOLD) { - e.preventDefault() - gestureHandled.current = true - setSidebarOpen(false) - } - } - } - - const onPointerUp = (_e: PointerEvent) => { - // console.log("onPointerUp") - touchStartX.current = null - touchStartY.current = null - gestureHandled.current = false - } - - const target = document.body - target.addEventListener('pointerdown', onPointerDown, {passive: false}) - target.addEventListener('pointermove', onPointerMove, {passive: false}) - target.addEventListener('pointerup', onPointerUp, {passive: false}) - - - return () => { - target.removeEventListener('pointerdown', onPointerDown) - target.removeEventListener('pointermove', onPointerMove) - target.removeEventListener('pointerup', onPointerUp) - } - }, [isMobile, sidebarOpen]) + // const touchStartX = useRef(null) + // const touchStartY = useRef(null) + // const gestureHandled = useRef(false) + // const isMobile = useIsMobile(1024) // for lg threshold, like in BottomNavBar vs Sidebar + // + // const HORIZONTAL_THRESHOLD = 50 // px required to count as swipe + // // const EDGE_START_MAX = 30 // px from left edge to allow open gesture + // + // // Prefer global pointer events so gestures work even if a child intercepts touches + // useEffect(() => { + // if (!isMobile) return + // + // const onPointerDown = (e: PointerEvent) => { + // // console.log("onPointerDown") + // if (!['touch', 'mouse'].includes(e.pointerType)) return + // touchStartX.current = e.clientX + // touchStartY.current = e.clientY + // gestureHandled.current = false + // } + // + // const onPointerMove = (e: PointerEvent) => { + // // console.log("onPointerMove") + // if (!['touch', 'mouse'].includes(e.pointerType)) return + // if (gestureHandled.current) return + // if (touchStartX.current == null) return + // const deltaX = e.clientX - touchStartX.current + // const deltaY = e.clientY - (touchStartY.current ?? 0) + // + // // Ignore primarily vertical gestures + // if (Math.abs(deltaY) > Math.abs(deltaX)) return + // + // if (!sidebarOpen) { + // // console.log("checking opening") + // // Open gesture: swipe right starting from the very left edge + // if (deltaX > HORIZONTAL_THRESHOLD) { + // e.preventDefault() + // gestureHandled.current = true + // setSidebarOpen(true) + // } + // } else { + // // Close gesture: swipe left anywhere + // if (deltaX < -HORIZONTAL_THRESHOLD) { + // e.preventDefault() + // gestureHandled.current = true + // setSidebarOpen(false) + // } + // } + // } + // + // const onPointerUp = (_e: PointerEvent) => { + // // console.log("onPointerUp") + // touchStartX.current = null + // touchStartY.current = null + // gestureHandled.current = false + // } + // + // const target = document.body + // target.addEventListener('pointerdown', onPointerDown, {passive: false}) + // target.addEventListener('pointermove', onPointerMove, {passive: false}) + // target.addEventListener('pointerup', onPointerUp, {passive: false}) + // + // + // return () => { + // target.removeEventListener('pointerdown', onPointerDown) + // target.removeEventListener('pointermove', onPointerMove) + // target.removeEventListener('pointerup', onPointerUp) + // } + // }, [isMobile, sidebarOpen]) return (