From 989d6eee0f53440dfb45bbff32f5e60a044f4c2b Mon Sep 17 00:00:00 2001 From: shatanikmahanty Date: Sun, 6 Oct 2024 11:56:26 +0530 Subject: [PATCH 1/3] Fix: Minimise sidebar on nav item click on Mobile --- frontend/src/Navigation.tsx | 57 +++++++++++++++------- frontend/src/components/SourceDropdown.tsx | 3 ++ 2 files changed, 42 insertions(+), 18 deletions(-) diff --git a/frontend/src/Navigation.tsx b/frontend/src/Navigation.tsx index 87cbbe514..8f7325158 100644 --- a/frontend/src/Navigation.tsx +++ b/frontend/src/Navigation.tsx @@ -199,22 +199,24 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) { menu toggle )}
-
+
{ + if (isMobile) { + setNavOpen(!navOpen); + } + }}>

DocsGPT

@@ -227,15 +229,17 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) { menu toggle
{ + if (isMobile) { + setNavOpen(!navOpen); + } dispatch(setConversation([])); dispatch( updateConversationId({ @@ -244,8 +248,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) { ); }} className={({ isActive }) => - `${ - isActive ? 'bg-gray-3000 dark:bg-transparent' : '' + `${isActive ? 'bg-gray-3000 dark:bg-transparent' : '' } group sticky mx-4 mt-4 flex cursor-pointer gap-2.5 rounded-3xl border border-silver p-3 hover:border-rainy-gray hover:bg-gray-3000 dark:border-purple-taupe dark:text-white dark:hover:bg-transparent` } > @@ -293,21 +296,35 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) { isDocsListOpen={isDocsListOpen} setIsDocsListOpen={setIsDocsListOpen} handleDeleteClick={handleDeleteClick} + handlePostDocumentSelect={(doc) => { + if (isMobile) { + setNavOpen(!navOpen) + } + }} /> setUploadModalState('ACTIVE')} - > + onClick={() => { + setUploadModalState('ACTIVE') + if (isMobile) { + setNavOpen(!navOpen); + } + } + }>

{t('sourceDocs')}

{ + if (isMobile) { + setNavOpen(!navOpen); + } + }} to="/settings" className={({ isActive }) => - `my-auto mx-4 flex h-9 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100 dark:hover:bg-[#28292E] ${ - isActive ? 'bg-gray-3000 dark:bg-transparent' : '' + `my-auto mx-4 flex h-9 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100 dark:hover:bg-[#28292E] ${isActive ? 'bg-gray-3000 dark:bg-transparent' : '' }` } > @@ -323,10 +340,14 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
{ + if (isMobile) { + setNavOpen(!navOpen); + } + }} to="/about" className={({ isActive }) => - `my-auto mx-4 flex h-9 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100 dark:hover:bg-[#28292E] ${ - isActive ? 'bg-gray-3000 dark:bg-[#28292E]' : '' + `my-auto mx-4 flex h-9 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100 dark:hover:bg-[#28292E] ${isActive ? 'bg-gray-3000 dark:bg-[#28292E]' : '' }` } > diff --git a/frontend/src/components/SourceDropdown.tsx b/frontend/src/components/SourceDropdown.tsx index d5146da54..efce34679 100644 --- a/frontend/src/components/SourceDropdown.tsx +++ b/frontend/src/components/SourceDropdown.tsx @@ -11,6 +11,7 @@ type Props = { isDocsListOpen: boolean; setIsDocsListOpen: React.Dispatch>; handleDeleteClick: any; + handlePostDocumentSelect: any; }; function SourceDropdown({ @@ -20,6 +21,7 @@ function SourceDropdown({ setIsDocsListOpen, isDocsListOpen, handleDeleteClick, + handlePostDocumentSelect, // Callback function fired after a document is selected }: Props) { const dispatch = useDispatch(); const { t } = useTranslation(); @@ -85,6 +87,7 @@ function SourceDropdown({ onClick={() => { dispatch(setSelectedDocs(option)); setIsDocsListOpen(false); + handlePostDocumentSelect(option); }} > Date: Mon, 7 Oct 2024 10:12:18 +0530 Subject: [PATCH 2/3] Fix: Close nav bar on conversation click --- frontend/src/Navigation.tsx | 1 + frontend/src/conversation/ConversationTile.tsx | 3 +++ 2 files changed, 4 insertions(+) diff --git a/frontend/src/Navigation.tsx b/frontend/src/Navigation.tsx index ceae67166..48bb73bde 100644 --- a/frontend/src/Navigation.tsx +++ b/frontend/src/Navigation.tsx @@ -280,6 +280,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) { key={conversation.id} conversation={conversation} selectConversation={(id) => handleConversationClick(id)} + onCoversationClick={() => {if (isMobile) { setNavOpen(false) }}} onDeleteConversation={(id) => handleDeleteConversation(id)} onSave={(conversation) => updateConversationName(conversation) diff --git a/frontend/src/conversation/ConversationTile.tsx b/frontend/src/conversation/ConversationTile.tsx index 3a0b85e4f..5db4ceab7 100644 --- a/frontend/src/conversation/ConversationTile.tsx +++ b/frontend/src/conversation/ConversationTile.tsx @@ -22,6 +22,7 @@ interface ConversationProps { interface ConversationTileProps { conversation: ConversationProps; selectConversation: (arg1: string) => void; + onCoversationClick: () => void; //Callback to handle click on conversation tile regardless of selected or not onDeleteConversation: (arg1: string) => void; onSave: ({ name, id }: ConversationProps) => void; } @@ -29,6 +30,7 @@ interface ConversationTileProps { export default function ConversationTile({ conversation, selectConversation, + onCoversationClick, onDeleteConversation, onSave, }: ConversationTileProps) { @@ -90,6 +92,7 @@ export default function ConversationTile({ setIsHovered(false); }} onClick={() => { + onCoversationClick(); conversationId !== conversation.id && selectConversation(conversation.id); }} From f01c04bb24db3a645817a14055d3fb8ea4a2755a Mon Sep 17 00:00:00 2001 From: shatanikmahanty Date: Mon, 7 Oct 2024 21:14:13 +0530 Subject: [PATCH 3/3] Fix: Add type to parameter in handlePostDocumentSelect callback --- frontend/src/Navigation.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/Navigation.tsx b/frontend/src/Navigation.tsx index 48bb73bde..0d99fd754 100644 --- a/frontend/src/Navigation.tsx +++ b/frontend/src/Navigation.tsx @@ -304,7 +304,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) { isDocsListOpen={isDocsListOpen} setIsDocsListOpen={setIsDocsListOpen} handleDeleteClick={handleDeleteClick} - handlePostDocumentSelect={(doc) => { + handlePostDocumentSelect={(option?: string) => { if (isMobile) { setNavOpen(!navOpen) }