Archives/DocsGPT
2
0
Fork 0
mirror of https://github.com/arc53/DocsGPT synced 2024-11-19 21:25:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

adding responsive sidebar

Browse Source
This commit is contained in:
ManishMadan2882 2024-01-05 01:50:52 +05:30
parent 7870749077
commit e7b9f5e4c3
1 changed files with 165 additions and 166 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
frontend/src/Navigation.tsx
View File

@ -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,13 +207,11 @@ 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={() => {
@ -227,9 +223,8 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
); );
}} }}
className={({ isActive }) => className={({ isActive }) =>
`${ `${isActive ? 'bg-gray-3000' : ''
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`
} 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 <img
@ -241,9 +236,13 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
New Chat New Chat
</p> </p>
</NavLink> </NavLink>
<div className="mb-auto h-[56vh] overflow-x-hidden overflow-y-scroll">
{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>
<div className="conversations-container">
{conversations?.map((conversation) => ( {conversations?.map((conversation) => (
<ConversationTile <ConversationTile
key={conversation.id} key={conversation.id}
@ -256,9 +255,11 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
/> />
))} ))}
</div> </div>
</div>
)} )}
</div> </div>
<div className='h-auto flex-col flex justify-end'>
<div className="flex flex-col-reverse border-b-2"> <div className="flex flex-col-reverse border-b-2">
<div className="relative my-4 flex gap-2 px-2"> <div className="relative my-4 flex gap-2 px-2">
<div <div
@ -273,8 +274,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
<img <img
src={Arrow2} src={Arrow2}
alt="arrow" alt="arrow"
className={`${ className={`${!isDocsListOpen ? 'rotate-0' : 'rotate-180'
!isDocsListOpen ? 'rotate-0' : 'rotate-180'
} ml-auto mr-3 w-3 transition-all`} } ml-auto mr-3 w-3 transition-all`}
/> />
</div> </div>
@ -330,8 +330,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
<NavLink <NavLink
to="/settings" to="/settings"
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' : ''
}` }`
} }
> >
@ -344,8 +343,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
<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' : ''
}` }`
} }
> >
@ -385,6 +383,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
</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">
<button <button
className="mt-5 ml-6 h-6 w-6 md:hidden" className="mt-5 ml-6 h-6 w-6 md:hidden"