diff --git a/src/pages/menu/components/CategoriesList/CategoriesList.module.css b/src/pages/menu/components/CategoriesList/CategoriesList.module.css index d94da31..0906f0b 100644 --- a/src/pages/menu/components/CategoriesList/CategoriesList.module.css +++ b/src/pages/menu/components/CategoriesList/CategoriesList.module.css @@ -120,18 +120,31 @@ gap: 0.5rem; padding: 0.5rem 1rem 1rem 1rem; margin-bottom: 0.5rem; - cursor: grab; user-select: none; } -.categoriesContainer:active { - cursor: grabbing; -} - .categoriesContainer::-webkit-scrollbar { display: none; } +/* Desktop drag cursor */ +@media (min-width: 1025px) { + .categoriesContainer { + cursor: grab; + } + + .categoriesContainer:active { + cursor: grabbing; + } +} + +/* Mobile/Tablet - use default cursor */ +@media (max-width: 1024px) { + .categoriesContainer { + cursor: default; + } +} + /* Smooth scrolling for drag interactions */ .categoriesContainer.dragging { scroll-behavior: auto; @@ -170,6 +183,11 @@ flex-wrap: nowrap; justify-content: flex-start; align-items: center; + cursor: grab; + } + + .categoriesContainer:active { + cursor: grabbing; } .categoriesSticky { diff --git a/src/pages/menu/components/CategoriesList/CategoriesList.tsx b/src/pages/menu/components/CategoriesList/CategoriesList.tsx index 8368ba7..4c27059 100644 --- a/src/pages/menu/components/CategoriesList/CategoriesList.tsx +++ b/src/pages/menu/components/CategoriesList/CategoriesList.tsx @@ -25,12 +25,15 @@ export function CategoriesList({ categories }: CategoriesListProps) { setActiveCategory, } = useScrollHandler(); const { isRTL } = useAppSelector((state) => state.locale); - - // Drag scroll functionality + + // Drag scroll functionality (desktop only) const isDragging = useRef(false); const startX = useRef(0); const scrollLeft = useRef(0); + // Only enable drag on desktop (not mobile or tablet) + const isDesktop = !xs; + const getCategoryCardStyle = useCallback(() => { if (xs) { return { @@ -98,28 +101,39 @@ export function CategoriesList({ categories }: CategoriesListProps) { } }, [activeCategory, scrollCategoryCardIntoView]); - // Drag scroll event handlers - const handleMouseDown = useCallback((e: React.MouseEvent) => { - const container = categoriesContainerRef?.current; - if (!container) return; + // Drag scroll event handlers (desktop only) + const handleMouseDown = useCallback( + (e: React.MouseEvent) => { + if (!isDesktop) return; - isDragging.current = true; - startX.current = e.pageX - container.offsetLeft; - scrollLeft.current = container.scrollLeft; - - // Prevent text selection during drag - e.preventDefault(); - }, [categoriesContainerRef]); + const container = categoriesContainerRef?.current; + if (!container) return; - const handleMouseMove = useCallback((e: React.MouseEvent) => { - const container = categoriesContainerRef?.current; - if (!container || !isDragging.current) return; + isDragging.current = true; + startX.current = e.pageX - container.offsetLeft; + scrollLeft.current = container.scrollLeft; - e.preventDefault(); - const x = e.pageX - container.offsetLeft; - const walk = (x - startX.current) * 2; // Multiply for faster scrolling - container.scrollLeft = scrollLeft.current - walk; - }, [categoriesContainerRef]); + // Prevent text selection during drag + e.preventDefault(); + }, + [categoriesContainerRef, isDesktop], + ); + + const handleMouseMove = useCallback( + (e: React.MouseEvent) => { + // Only enable drag on desktop + if (!isDesktop) return; + + const container = categoriesContainerRef?.current; + if (!container || !isDragging.current) return; + + e.preventDefault(); + const x = e.pageX - container.offsetLeft; + const walk = (x - startX.current) * 2; // Multiply for faster scrolling + container.scrollLeft = scrollLeft.current - walk; + }, + [categoriesContainerRef, isDesktop], + ); const handleMouseUp = useCallback(() => { isDragging.current = false; @@ -129,27 +143,20 @@ export function CategoriesList({ categories }: CategoriesListProps) { isDragging.current = false; }, []); - // Touch event handlers for mobile - const handleTouchStart = useCallback((e: React.TouchEvent) => { - const container = categoriesContainerRef?.current; - if (!container) return; + // Touch event handlers - disabled for mobile/tablet (use native scroll) + const handleTouchStart = useCallback(() => { + // Disable custom touch handling - let native scroll work + return; + }, []); - isDragging.current = true; - startX.current = e.touches[0].pageX - container.offsetLeft; - scrollLeft.current = container.scrollLeft; - }, [categoriesContainerRef]); - - const handleTouchMove = useCallback((e: React.TouchEvent) => { - const container = categoriesContainerRef?.current; - if (!container || !isDragging.current) return; - - const x = e.touches[0].pageX - container.offsetLeft; - const walk = (x - startX.current) * 2; - container.scrollLeft = scrollLeft.current - walk; - }, [categoriesContainerRef]); + const handleTouchMove = useCallback(() => { + // Disable custom touch handling - let native scroll work + return; + }, []); const handleTouchEnd = useCallback(() => { - isDragging.current = false; + // Disable custom touch handling - let native scroll work + return; }, []); return (