mirror of
https://github.com/arc53/DocsGPT
synced 2024-11-19 21:25:39 +00:00
adding responsive sidebar
This commit is contained in:
ManishMadan2882
parent
7870749077
commit
e7b9f5e4c3
@ -181,20 +181,18 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
|
|||||||
<img
|
<img
|
||||||
src={Expand}
|
src={Expand}
|
||||||
alt="menu toggle"
|
alt="menu toggle"
|
||||||
className={`${
|
className={`${!navOpen ? 'rotate-180' : 'rotate-0'
|
||||||
!navOpen ? 'rotate-180' : 'rotate-0'
|
} m-auto transition-all duration-200`}
|
||||||
} m-auto transition-all duration-200`}
|
|
||||||
/>
|
/>
|
||||||
</button>
|
</button>
|
||||||
)}
|
)}
|
||||||
<div
|
<div
|
||||||
ref={navRef}
|
ref={navRef}
|
||||||
className={`${
|
className={`${!navOpen && '-ml-96 md:-ml-[18rem]'
|
||||||
!navOpen && '-ml-96 md:-ml-[18rem]'
|
} duration-20 fixed top-0 z-20 flex h-full w-72 flex-col border-r-2 bg-white transition-all`}
|
||||||
} duration-20 fixed top-0 z-20 flex h-full w-72 flex-col border-r-2 bg-white transition-all`}
|
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
className={'visible mt-2 flex h-16 w-full justify-between md:h-12'}
|
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">
|
||||||
<img className="mb-2 h-10" src={DocsGPT3} alt="" />
|
<img className="mb-2 h-10" src={DocsGPT3} alt="" />
|
||||||
@ -209,180 +207,181 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
|
|||||||
<img
|
<img
|
||||||
src={Expand}
|
src={Expand}
|
||||||
alt="menu toggle"
|
alt="menu toggle"
|
||||||
className={`${
|
className={`${!navOpen ? 'rotate-180' : 'rotate-0'
|
||||||
!navOpen ? 'rotate-180' : 'rotate-0'
|
} m-auto transition-all duration-200`}
|
||||||
} m-auto transition-all duration-200`}
|
|
||||||
/>
|
/>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div className="mb-auto">
|
<NavLink
|
||||||
<NavLink
|
to={'/'}
|
||||||
to={'/'}
|
onClick={() => {
|
||||||
onClick={() => {
|
dispatch(setConversation([]));
|
||||||
dispatch(setConversation([]));
|
dispatch(
|
||||||
dispatch(
|
updateConversationId({
|
||||||
updateConversationId({
|
query: { conversationId: null },
|
||||||
query: { conversationId: null },
|
}),
|
||||||
}),
|
);
|
||||||
);
|
}}
|
||||||
}}
|
className={({ isActive }) =>
|
||||||
className={({ isActive }) =>
|
`${isActive ? 'bg-gray-3000' : ''
|
||||||
`${
|
} group mx-4 mt-4 sticky flex cursor-pointer gap-2.5 rounded-3xl border border-silver p-3 hover:border-rainy-gray hover:bg-gray-3000`
|
||||||
isActive ? 'bg-gray-3000' : ''
|
}
|
||||||
} group 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`
|
>
|
||||||
}
|
<img
|
||||||
>
|
src={Add}
|
||||||
<img
|
alt="new"
|
||||||
src={Add}
|
className="opacity-80 group-hover:opacity-100"
|
||||||
alt="new"
|
/>
|
||||||
className="opacity-80 group-hover:opacity-100"
|
<p className=" text-sm text-dove-gray group-hover:text-neutral-600 ">
|
||||||
/>
|
New Chat
|
||||||
<p className=" text-sm text-dove-gray group-hover:text-neutral-600">
|
</p>
|
||||||
New Chat
|
</NavLink>
|
||||||
</p>
|
<div className="mb-auto h-[56vh] overflow-x-hidden overflow-y-scroll">
|
||||||
</NavLink>
|
|
||||||
{conversations && (
|
{conversations && (
|
||||||
<div className="conversations-container max-h-[25rem] overflow-y-auto">
|
<div>
|
||||||
<p className="ml-6 mt-3 text-sm font-semibold">Chats</p>
|
<p className="ml-6 mt-3 text-sm font-semibold">Chats</p>
|
||||||
{conversations?.map((conversation) => (
|
<div className="conversations-container">
|
||||||
<ConversationTile
|
|
||||||
key={conversation.id}
|
{conversations?.map((conversation) => (
|
||||||
conversation={conversation}
|
<ConversationTile
|
||||||
selectConversation={(id) => handleConversationClick(id)}
|
key={conversation.id}
|
||||||
onDeleteConversation={(id) => handleDeleteConversation(id)}
|
conversation={conversation}
|
||||||
onSave={(conversation) =>
|
selectConversation={(id) => handleConversationClick(id)}
|
||||||
updateConversationName(conversation)
|
onDeleteConversation={(id) => handleDeleteConversation(id)}
|
||||||
}
|
onSave={(conversation) =>
|
||||||
/>
|
updateConversationName(conversation)
|
||||||
))}
|
}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="flex flex-col-reverse border-b-2">
|
<div className='h-auto flex-col flex justify-end'>
|
||||||
<div className="relative my-4 flex gap-2 px-2">
|
<div className="flex flex-col-reverse border-b-2">
|
||||||
<div
|
<div className="relative my-4 flex gap-2 px-2">
|
||||||
className="flex h-12 w-5/6 cursor-pointer justify-between rounded-3xl border-2 bg-white"
|
<div
|
||||||
onClick={() => setIsDocsListOpen(!isDocsListOpen)}
|
className="flex h-12 w-5/6 cursor-pointer justify-between rounded-3xl border-2 bg-white"
|
||||||
>
|
onClick={() => setIsDocsListOpen(!isDocsListOpen)}
|
||||||
{selectedDocs && (
|
>
|
||||||
<p className="my-3 mx-4 overflow-hidden text-ellipsis whitespace-nowrap">
|
{selectedDocs && (
|
||||||
{selectedDocs.name} {selectedDocs.version}
|
<p className="my-3 mx-4 overflow-hidden text-ellipsis whitespace-nowrap">
|
||||||
</p>
|
{selectedDocs.name} {selectedDocs.version}
|
||||||
)}
|
</p>
|
||||||
<img
|
|
||||||
src={Arrow2}
|
|
||||||
alt="arrow"
|
|
||||||
className={`${
|
|
||||||
!isDocsListOpen ? 'rotate-0' : 'rotate-180'
|
|
||||||
} ml-auto mr-3 w-3 transition-all`}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<img
|
|
||||||
className="mt-2 h-9 w-9 hover:cursor-pointer"
|
|
||||||
src={UploadIcon}
|
|
||||||
onClick={() => setUploadModalState('ACTIVE')}
|
|
||||||
></img>
|
|
||||||
{isDocsListOpen && (
|
|
||||||
<div className="absolute top-12 left-0 right-6 z-10 ml-2 mr-4 max-h-52 overflow-y-scroll bg-white shadow-lg">
|
|
||||||
{docs ? (
|
|
||||||
docs.map((doc, index) => {
|
|
||||||
if (doc.model === embeddingsName) {
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
key={index}
|
|
||||||
onClick={() => {
|
|
||||||
dispatch(setSelectedDocs(doc));
|
|
||||||
setIsDocsListOpen(false);
|
|
||||||
}}
|
|
||||||
className="flex h-10 w-full cursor-pointer items-center justify-between border-x-2 border-b-2 hover:bg-gray-100"
|
|
||||||
>
|
|
||||||
<p className="ml-5 flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap py-3">
|
|
||||||
{doc.name} {doc.version}
|
|
||||||
</p>
|
|
||||||
{doc.location === 'local' && (
|
|
||||||
<img
|
|
||||||
src={Trash}
|
|
||||||
alt="Delete"
|
|
||||||
className="mr-4 h-4 w-4 cursor-pointer hover:opacity-50"
|
|
||||||
id={`img-${index}`}
|
|
||||||
onClick={(event) => {
|
|
||||||
event.stopPropagation();
|
|
||||||
handleDeleteClick(index, doc);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
})
|
|
||||||
) : (
|
|
||||||
<div className="h-10 w-full cursor-pointer border-x-2 border-b-2 hover:bg-gray-100">
|
|
||||||
<p className="ml-5 py-3">No default documentation.</p>
|
|
||||||
</div>
|
|
||||||
)}
|
)}
|
||||||
|
<img
|
||||||
|
src={Arrow2}
|
||||||
|
alt="arrow"
|
||||||
|
className={`${!isDocsListOpen ? 'rotate-0' : 'rotate-180'
|
||||||
|
} ml-auto mr-3 w-3 transition-all`}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
)}
|
<img
|
||||||
|
className="mt-2 h-9 w-9 hover:cursor-pointer"
|
||||||
|
src={UploadIcon}
|
||||||
|
onClick={() => setUploadModalState('ACTIVE')}
|
||||||
|
></img>
|
||||||
|
{isDocsListOpen && (
|
||||||
|
<div className="absolute top-12 left-0 right-6 z-10 ml-2 mr-4 max-h-52 overflow-y-scroll bg-white shadow-lg">
|
||||||
|
{docs ? (
|
||||||
|
docs.map((doc, index) => {
|
||||||
|
if (doc.model === embeddingsName) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
key={index}
|
||||||
|
onClick={() => {
|
||||||
|
dispatch(setSelectedDocs(doc));
|
||||||
|
setIsDocsListOpen(false);
|
||||||
|
}}
|
||||||
|
className="flex h-10 w-full cursor-pointer items-center justify-between border-x-2 border-b-2 hover:bg-gray-100"
|
||||||
|
>
|
||||||
|
<p className="ml-5 flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap py-3">
|
||||||
|
{doc.name} {doc.version}
|
||||||
|
</p>
|
||||||
|
{doc.location === 'local' && (
|
||||||
|
<img
|
||||||
|
src={Trash}
|
||||||
|
alt="Delete"
|
||||||
|
className="mr-4 h-4 w-4 cursor-pointer hover:opacity-50"
|
||||||
|
id={`img-${index}`}
|
||||||
|
onClick={(event) => {
|
||||||
|
event.stopPropagation();
|
||||||
|
handleDeleteClick(index, doc);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
) : (
|
||||||
|
<div className="h-10 w-full cursor-pointer border-x-2 border-b-2 hover:bg-gray-100">
|
||||||
|
<p className="ml-5 py-3">No default documentation.</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<p className="ml-6 mt-3 text-sm font-semibold">Source Docs</p>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col gap-2 border-b-2 py-2">
|
||||||
|
<NavLink
|
||||||
|
to="/settings"
|
||||||
|
className={({ isActive }) =>
|
||||||
|
`my-auto mx-4 flex h-9 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100 ${isActive ? 'bg-gray-3000' : ''
|
||||||
|
}`
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<img src={SettingGear} alt="settings" className="ml-2 w-5 opacity-60" />
|
||||||
|
<p className="my-auto text-sm text-eerie-black">Settings</p>
|
||||||
|
</NavLink>
|
||||||
</div>
|
</div>
|
||||||
<p className="ml-6 mt-3 text-sm font-semibold">Source Docs</p>
|
|
||||||
</div>
|
|
||||||
<div className="flex flex-col gap-2 border-b-2 py-2">
|
|
||||||
<NavLink
|
|
||||||
to="/settings"
|
|
||||||
className={({ isActive }) =>
|
|
||||||
`my-auto mx-4 flex h-9 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100 ${
|
|
||||||
isActive ? 'bg-gray-3000' : ''
|
|
||||||
}`
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<img src={SettingGear} alt="settings" className="ml-2 w-5 opacity-60" />
|
|
||||||
<p className="my-auto text-sm text-eerie-black">Settings</p>
|
|
||||||
</NavLink>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex flex-col gap-2 border-b-2 py-2">
|
<div className="flex flex-col gap-2 border-b-2 py-2">
|
||||||
<NavLink
|
<NavLink
|
||||||
to="/about"
|
to="/about"
|
||||||
className={({ isActive }) =>
|
className={({ isActive }) =>
|
||||||
`my-auto mx-4 flex h-9 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100 ${
|
`my-auto mx-4 flex h-9 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100 ${isActive ? 'bg-gray-3000' : ''
|
||||||
isActive ? 'bg-gray-3000' : ''
|
}`
|
||||||
}`
|
}
|
||||||
}
|
>
|
||||||
>
|
<img src={Info} alt="info" className="ml-2 w-5" />
|
||||||
<img src={Info} alt="info" className="ml-2 w-5" />
|
<p className="my-auto text-sm text-eerie-black">About</p>
|
||||||
<p className="my-auto text-sm text-eerie-black">About</p>
|
</NavLink>
|
||||||
</NavLink>
|
|
||||||
|
|
||||||
<a
|
<a
|
||||||
href="https://docs.docsgpt.co.uk/"
|
href="https://docs.docsgpt.co.uk/"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
rel="noreferrer"
|
rel="noreferrer"
|
||||||
className="my-auto mx-4 flex h-9 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100"
|
className="my-auto mx-4 flex h-9 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100"
|
||||||
>
|
>
|
||||||
<img src={Documentation} alt="documentation" className="ml-2 w-5" />
|
<img src={Documentation} alt="documentation" className="ml-2 w-5" />
|
||||||
<p className="my-auto text-sm text-eerie-black">Documentation</p>
|
<p className="my-auto text-sm text-eerie-black">Documentation</p>
|
||||||
</a>
|
</a>
|
||||||
<a
|
<a
|
||||||
href="https://discord.gg/WHJdfbQDR4"
|
href="https://discord.gg/WHJdfbQDR4"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
rel="noreferrer"
|
rel="noreferrer"
|
||||||
className="my-auto mx-4 flex h-9 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100"
|
className="my-auto mx-4 flex h-9 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100"
|
||||||
>
|
>
|
||||||
<img src={Discord} alt="discord-link" className="ml-2 w-5" />
|
<img src={Discord} alt="discord-link" className="ml-2 w-5" />
|
||||||
<p className="my-auto text-sm text-eerie-black">
|
<p className="my-auto text-sm text-eerie-black">
|
||||||
Visit our Discord
|
Visit our Discord
|
||||||
</p>
|
</p>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<a
|
<a
|
||||||
href="https://github.com/arc53/DocsGPT"
|
href="https://github.com/arc53/DocsGPT"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
rel="noreferrer"
|
rel="noreferrer"
|
||||||
className="my-auto mx-4 flex h-9 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100"
|
className="my-auto mx-4 flex h-9 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100"
|
||||||
>
|
>
|
||||||
<img src={Github} alt="github-link" className="ml-2 w-5" />
|
<img src={Github} alt="github-link" className="ml-2 w-5" />
|
||||||
<p className="my-auto text-sm text-eerie-black">Visit our Github</p>
|
<p className="my-auto text-sm text-eerie-black">Visit our Github</p>
|
||||||
</a>
|
</a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="fixed z-10 h-16 w-full border-b-2 bg-gray-50 md:hidden">
|
<div className="fixed z-10 h-16 w-full border-b-2 bg-gray-50 md:hidden">
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user