Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2025-12-18 09:20:15 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

feat: basic support in mobile mode. including:

Browse source 
navbar show and hide,
similar fade animation,
auto close when select new convo,
mobile title will change with convo,
new chat button.
This commit is contained in:
Wentao Lyu 2023-03-12 00:32:03 +08:00
parent fb9f77ae5e
commit 070fee2ece
5 changed files with 160 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

104
client/src/components/Nav/index.jsx
View file

@ -8,7 +8,7 @@ import { swr } from '~/utils/fetchers';
import { useDispatch, useSelector } from 'react-redux';
import { incrementPage, setConvos } from '~/store/convoSlice';
export default function Nav() {
export default function Nav({ navVisible, setNavVisible }) {
const dispatch = useDispatch();
const [isHovering, setIsHovering] = useState(false);
const { conversationId, convos, pageNumber } = useSelector((state) => state.convo);
@ -47,42 +47,88 @@ export default function Nav() {
}
}, [data]);
useEffect(() => {
setNavVisible(false)
}, [conversationId, ])
const toggleNavVisible = () => {
setNavVisible((prev) => {
return !prev
})
}
const containerClasses =
isLoading && pageNumber === 1
? 'flex flex-col gap-2 text-gray-100 text-sm h-full justify-center items-center'
: 'flex flex-col gap-2 text-gray-100 text-sm';
return (
<div className="dark hidden bg-gray-900 md:fixed md:inset-y-0 md:flex md:w-[260px] md:flex-col">
<div className="flex h-full min-h-0 flex-col ">
<div className="scrollbar-trigger flex h-full w-full flex-1 items-start border-white/20">
<nav className="flex h-full flex-1 flex-col space-y-1 p-2">
<NewChat />
<div
className={`-mr-2 flex-1 flex-col overflow-y-auto ${
isHovering ? '' : 'scrollbar-transparent'
} border-b border-white/20`}
onMouseEnter={() => setIsHovering(true)}
onMouseLeave={() => setIsHovering(false)}
ref={containerRef}
>
<div className={containerClasses}>
{isLoading && pageNumber === 1 ? (
<Spinner />
) : (
<Conversations
conversations={convos}
conversationId={conversationId}
showMore={showMore}
pageNumber={pageNumber}
/>
)}
<>
<div className={"dark nav bg-gray-900 md:fixed md:inset-y-0 md:flex md:w-[260px] md:flex-col" + (navVisible?' active':'')}>
<div className="flex h-full min-h-0 flex-col ">
<div className="scrollbar-trigger flex h-full w-full flex-1 items-start border-white/20">
<nav className="flex h-full flex-1 flex-col space-y-1 p-2">
<NewChat />
<div
className={`flex-1 flex-col overflow-y-auto ${
isHovering ? '' : 'scrollbar-transparent'
} border-b border-white/20`}
onMouseEnter={() => setIsHovering(true)}
onMouseLeave={() => setIsHovering(false)}
ref={containerRef}
>
<div className={containerClasses}>
{isLoading && pageNumber === 1 ? (
<Spinner />
) : (
<Conversations
conversations={convos}
conversationId={conversationId}
showMore={showMore}
pageNumber={pageNumber}
/>
)}
</div>
</div>
</div>
<NavLinks />
</nav>
<NavLinks />
</nav>
</div>
</div>
<button
type="button"
className="nav-close-button -ml-0.5 -mt-0.5 inline-flex h-10 w-10 items-center justify-center rounded-md hover:text-gray-900 focus:outline-none focus:ring-white hover:text-white text-white"
onClick={toggleNavVisible}
>
<span className="sr-only">Open sidebar</span>
<svg
stroke="currentColor"
fill="none"
strokeWidth="1.5"
viewBox="0 0 24 24"
strokeLinecap="round"
strokeLinejoin="round"
className="h-6 w-6"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<line
x1="3"
y1="6"
x2="15"
y2="18"
/>
<line
x1="3"
y1="18"
x2="15"
y2="6"
/>
</svg>
</button>
</div>
</div>
<div className={"nav-mask" + (navVisible?' active':'')} onClick={toggleNavVisible}>
</div>
</>
);
}