mirror/Compass
1
0
Fork 0
mirror of https://github.com/CompassConnections/Compass.git synced 2026-01-23 05:09:51 -05:00
Code Issues Packages Projects Releases Wiki Activity

Disable sidebar open on swipe for now

Browse Source
This commit is contained in:
MartinBraquet
2026-01-16 14:29:48 +01:00
parent f6bf4b5b23
commit 9e324150c4
1 changed files with 70 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

140
web/components/nav/bottom-nav-bar.tsx
View File

@@ -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<number | null>(null)
const touchStartY = useRef<number | null>(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<number | null>(null)
// const touchStartY = useRef<number | null>(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 (
<div>