KeyArgo
/
llama-gpt
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added Better Closing Sidebar Logic (Close on Background Click) (#122)

This commit is contained in:
Awesh Choudhary 2023-03-25 17:42:06 +05:30 committed by GitHub
parent 69e05160a3
commit 291e2d9852
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 6 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/Sidebar/Sidebar.tsx
View File

@ -77,7 +77,7 @@ export const Sidebar: FC<Props> = ({ loading, conversations, lightMode, selected
}, [searchTerm, conversations]); }, [searchTerm, conversations]);
return ( return (
<aside className={`h-full flex flex-none space-y-2 p-2 flex-col bg-[#202123] w-[260px] z-10 sm:relative sm:top-0 absolute top-12 bottom-0`}> <aside className={`h-full transition-all flex flex-none space-y-2 p-2 flex-col bg-[#202123] w-[260px] z-50 sm:relative sm:top-0 fixed top-0 bottom-0`}>
<header className="flex items-center"> <header className="flex items-center">
<button <button
className="flex gap-3 p-3 items-center w-[190px] rounded-md hover:bg-gray-500/10 transition-colors duration-200 text-white cursor-pointer text-sm flex-shrink-0 border border-white/20" className="flex gap-3 p-3 items-center w-[190px] rounded-md hover:bg-gray-500/10 transition-colors duration-200 text-white cursor-pointer text-sm flex-shrink-0 border border-white/20"

8
pages/index.tsx
View File

@ -479,7 +479,7 @@ export default function Home() {
<article className="flex h-full w-full pt-[48px] sm:pt-0"> <article className="flex h-full w-full pt-[48px] sm:pt-0">
{showSidebar ? ( {showSidebar ? (
<> <div>
<Sidebar <Sidebar
loading={messageIsStreaming} loading={messageIsStreaming}
conversations={conversations} conversations={conversations}
@ -503,10 +503,12 @@ export default function Home() {
/> />
<IconArrowBarLeft <IconArrowBarLeft
className="fixed top-2.5 left-4 sm:top-1 sm:left-4 sm:text-neutral-700 dark:text-white cursor-pointer hover:text-gray-400 dark:hover:text-gray-300 h-7 w-7 sm:h-8 sm:w-8 sm:hidden" className="z-50 fixed top-5 left-[270px] sm:top-1 sm:left-4 sm:text-neutral-700 dark:text-white cursor-pointer hover:text-gray-400 dark:hover:text-gray-300 h-7 w-7 sm:h-8 sm:w-8 sm:hidden"
onClick={() => setShowSidebar(!showSidebar)} onClick={() => setShowSidebar(!showSidebar)}
/> />
</> {/* Sidebar Background for closing on click outside of it. */}
<div onClick={() => setShowSidebar(!showSidebar)} className="sm:hidden bg-black opacity-70 z-10 absolute top-0 left-0 h-full w-full"></div>
</div>
) : ( ) : (
<IconArrowBarRight <IconArrowBarRight
className="fixed text-white z-50 top-2.5 left-4 sm:top-1.5 sm:left-4 sm:text-neutral-700 dark:text-white cursor-pointer hover:text-gray-400 dark:hover:text-gray-300 h-7 w-7 sm:h-8 sm:w-8" className="fixed text-white z-50 top-2.5 left-4 sm:top-1.5 sm:left-4 sm:text-neutral-700 dark:text-white cursor-pointer hover:text-gray-400 dark:hover:text-gray-300 h-7 w-7 sm:h-8 sm:w-8"