Skip to content

Commit

Permalink
Merge pull request #1248 from shatanikmahanty/issues/1226
Browse files Browse the repository at this point in the history 
Fix: Minimise sidebar on nav item click on Mobile
  • Loading branch information
@dartpain
dartpain authored Oct 7, 2024
2 parents c5adea6 + 534b650 commit 94a8c42
Show file tree
Hide file tree
Showing 3 changed files with 54 additions and 22 deletions.
66 changes: 45 additions & 21 deletions frontend/src/Navigation.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -209,22 +209,24 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
<img
src={Expand}
alt="menu toggle"
className={`${
!navOpen ? 'rotate-180' : 'rotate-0'
} m-auto transition-all duration-200`}
className={`${!navOpen ? 'rotate-180' : 'rotate-0'
} m-auto transition-all duration-200`}
/>
</button>
)}
<div
ref={navRef}
className={`${
!navOpen && '-ml-96 md:-ml-[18rem]'
} duration-20 fixed top-0 z-20 flex h-full w-72 flex-col border-r-[1px] border-b-0 bg-white transition-all dark:border-r-purple-taupe dark:bg-chinese-black dark:text-white`}
className={`${!navOpen && '-ml-96 md:-ml-[18rem]'
} duration-20 fixed top-0 z-20 flex h-full w-72 flex-col border-r-[1px] border-b-0 bg-white transition-all dark:border-r-purple-taupe dark:bg-chinese-black dark:text-white`}
>
<div
className={'visible mt-2 flex h-[6vh] w-full justify-between md:h-12'}
>
<div className="my-auto mx-4 flex cursor-pointer gap-1.5">
<div className="my-auto mx-4 flex cursor-pointer gap-1.5" onClick={() => {
if (isMobile) {
setNavOpen(!navOpen);
}
}}>
<a href="/" className="flex gap-1.5">
<img className="mb-2 h-10" src={DocsGPT3} alt="" />
<p className="my-auto text-2xl font-semibold">DocsGPT</p>
Expand All @@ -239,18 +241,21 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
<img
src={Expand}
alt="menu toggle"
className={`${
!navOpen ? 'rotate-180' : 'rotate-0'
} m-auto transition-all duration-200`}
className={`${!navOpen ? 'rotate-180' : 'rotate-0'
} m-auto transition-all duration-200`}
/>
</button>
</div>
<NavLink
to={'/'}
onClick={resetConversation}
onClick={() => {
if (isMobile) {
setNavOpen(!navOpen);
}
resetConversation();
}}
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`
}
>
Expand All @@ -275,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)
Expand All @@ -298,24 +304,38 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
isDocsListOpen={isDocsListOpen}
setIsDocsListOpen={setIsDocsListOpen}
handleDeleteClick={handleDeleteClick}
handlePostDocumentSelect={(option?: string) => {
if (isMobile) {
setNavOpen(!navOpen)
}
}}
/>
<img
className="mt-2 h-9 w-9 hover:cursor-pointer"
src={UploadIcon}
onClick={() => setUploadModalState('ACTIVE')}
></img>
onClick={() => {
setUploadModalState('ACTIVE')
if (isMobile) {
setNavOpen(!navOpen);
}
}
}></img>
</div>
<p className="ml-5 mt-3 text-sm font-semibold">{t('sourceDocs')}</p>
</div>
<div className="flex flex-col gap-2 border-b-[1px] py-2 dark:border-b-purple-taupe">
<NavLink
onClick={() => {
if (isMobile) {
setNavOpen(!navOpen);
}
resetConversation();
}}
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' : ''
}`
}
onClick={resetConversation}
>
<img
src={SettingGear}
Expand All @@ -329,13 +349,17 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
</div>
<div className="flex justify-between gap-2 border-b-[1.5px] py-2 dark:border-b-purple-taupe">
<NavLink
onClick={() => {
if (isMobile) {
setNavOpen(!navOpen);
}
resetConversation();
}}
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]' : ''
}`
}
onClick={resetConversation}
>
<img
src={Info}
Expand Down
7 changes: 6 additions & 1 deletion frontend/src/components/SourceDropdown.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ type Props = {
isDocsListOpen: boolean;
setIsDocsListOpen: React.Dispatch<React.SetStateAction<boolean>>;
handleDeleteClick: any;
handlePostDocumentSelect: any;
};

function SourceDropdown({
Expand All @@ -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();
Expand Down Expand Up @@ -85,6 +87,7 @@ function SourceDropdown({
onClick={() => {
dispatch(setSelectedDocs(option));
setIsDocsListOpen(false);
handlePostDocumentSelect(option);
}}
>
<span
Expand Down Expand Up @@ -118,7 +121,9 @@ function SourceDropdown({
className="flex cursor-pointer items-center justify-between hover:bg-gray-100 dark:text-bright-gray dark:hover:bg-purple-taupe"
onClick={handleEmptyDocumentSelect}
>
<span className="ml-4 flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap py-3">
<span className="ml-4 flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap py-3" onClick = {() => {
handlePostDocumentSelect(null);
}}>
{t('none')}
</span>
</div>
Expand Down
3 changes: 3 additions & 0 deletions frontend/src/conversation/ConversationTile.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,13 +22,15 @@ 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;
}

export default function ConversationTile({
conversation,
selectConversation,
onCoversationClick,
onDeleteConversation,
onSave,
}: ConversationTileProps) {
Expand Down Expand Up @@ -90,6 +92,7 @@ export default function ConversationTile({
setIsHovered(false);
}}
onClick={() => {
onCoversationClick();
conversationId !== conversation.id &&
selectConversation(conversation.id);
}}
Expand Down

0 comments on commit 94a8c42

Please sign in to comment.