diff --git a/frontend/src/Navigation.tsx b/frontend/src/Navigation.tsx index ced91fca..3d1dc614 100644 --- a/frontend/src/Navigation.tsx +++ b/frontend/src/Navigation.tsx @@ -275,7 +275,10 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) { {t('newChat')}

-
+
{conversations && conversations.length > 0 ? (
diff --git a/frontend/src/conversation/ConversationTile.tsx b/frontend/src/conversation/ConversationTile.tsx index 0193d161..dd3e6e1d 100644 --- a/frontend/src/conversation/ConversationTile.tsx +++ b/frontend/src/conversation/ConversationTile.tsx @@ -1,4 +1,10 @@ -import { SyntheticEvent, useEffect, useRef, useState } from 'react'; +import { + SyntheticEvent, + useEffect, + useRef, + useState, + useCallback, +} from 'react'; import { useSelector } from 'react-redux'; import Edit from '../assets/edit.svg'; import Exit from '../assets/exit.svg'; @@ -75,6 +81,36 @@ export default function ConversationTile({ document.removeEventListener('mousedown', handleClickOutside); }; }, []); + + const preventScroll = useCallback((event: WheelEvent | TouchEvent) => { + event.preventDefault(); + }, []); + + useEffect(() => { + const conversationsMainDiv = document.getElementById( + 'conversationsMainDiv', + ); + + if (conversationsMainDiv) { + if (isOpen) { + conversationsMainDiv.addEventListener('wheel', preventScroll, { + passive: false, + }); + conversationsMainDiv.addEventListener('touchmove', preventScroll, { + passive: false, + }); + } else { + conversationsMainDiv.removeEventListener('wheel', preventScroll); + conversationsMainDiv.removeEventListener('touchmove', preventScroll); + } + + return () => { + conversationsMainDiv.removeEventListener('wheel', preventScroll); + conversationsMainDiv.removeEventListener('touchmove', preventScroll); + }; + } + }, [isOpen]); + function onClear() { setConversationsName(conversation.name); setIsEdit(false); @@ -147,7 +183,7 @@ export default function ConversationTile({