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

Hotfix (#334)

Browse source 
* style(NavLinks.jsx): add 'as="div"' to Menu.Item components
refactor(Nav.jsx): remove unused code and add isMobile function to check if user is on mobile device

* conditionally render menuitem with search

---------

Co-authored-by: stunt_pilot <twitchstuntpilot@gmail.com>
This commit is contained in:
Danny Avila 2023-05-19 19:37:56 -04:00 • committed by GitHub
parent a9444b66a1
commit ab7cfc6041
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 42 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

16
client/src/components/Nav/NavLinks.jsx
View file

@ -69,10 +69,12 @@ export default function NavLinks({ clearSearch, isSearchEnabled }) {
leaveTo="transform opacity-0 scale-95" leaveTo="transform opacity-0 scale-95"
> >
<Menu.Items className="absolute bottom-full left-0 z-20 mb-2 w-full translate-y-0 overflow-hidden rounded-md bg-[#050509] py-1.5 opacity-100 outline-none"> <Menu.Items className="absolute bottom-full left-0 z-20 mb-2 w-full translate-y-0 overflow-hidden rounded-md bg-[#050509] py-1.5 opacity-100 outline-none">
<Menu.Item> {isSearchEnabled && (
{!!isSearchEnabled && <SearchBar clearSearch={clearSearch} />} <Menu.Item>
</Menu.Item> <SearchBar clearSearch={clearSearch} />
<Menu.Item> </Menu.Item>
)}
<Menu.Item as="div">
<NavLink <NavLink
className={cn( className={cn(
'flex w-full cursor-pointer items-center gap-3 px-3 py-3 text-sm text-white transition-colors duration-200 hover:bg-gray-700', 'flex w-full cursor-pointer items-center gap-3 px-3 py-3 text-sm text-white transition-colors duration-200 hover:bg-gray-700',
@ -84,10 +86,10 @@ export default function NavLinks({ clearSearch, isSearchEnabled }) {
/> />
</Menu.Item> </Menu.Item>
<div className="my-1.5 h-px bg-white/20" role="none" /> <div className="my-1.5 h-px bg-white/20" role="none" />
<Menu.Item> <Menu.Item as="div">
<DarkMode /> <DarkMode />
</Menu.Item> </Menu.Item>
<Menu.Item> <Menu.Item as="div">
<NavLink <NavLink
className="flex w-full cursor-pointer items-center gap-3 px-3 py-3 text-sm text-white transition-colors duration-200 hover:bg-gray-700" className="flex w-full cursor-pointer items-center gap-3 px-3 py-3 text-sm text-white transition-colors duration-200 hover:bg-gray-700"
svg={() => <TrashIcon />} svg={() => <TrashIcon />}
@ -96,7 +98,7 @@ export default function NavLinks({ clearSearch, isSearchEnabled }) {
/> />
</Menu.Item> </Menu.Item>
<div className="my-1.5 h-px bg-white/20" role="none" /> <div className="my-1.5 h-px bg-white/20" role="none" />
<Menu.Item> <Menu.Item as="div">
<Logout /> <Logout />
</Menu.Item> </Menu.Item>
</Menu.Items> </Menu.Items>

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

@ -13,25 +13,25 @@ import { useAuthContext } from '~/hooks/AuthContext';
import { ThemeContext } from '~/hooks/ThemeContext'; import { ThemeContext } from '~/hooks/ThemeContext';
import { cn } from '~/utils/'; import { cn } from '~/utils/';
import resolveConfig from 'tailwindcss/resolveConfig'; // import resolveConfig from 'tailwindcss/resolveConfig';
const tailwindConfig = import('../../../tailwind.config.cjs'); // const tailwindConfig = import('../../../tailwind.config.cjs');
const fullConfig = resolveConfig(tailwindConfig); // const fullConfig = resolveConfig(tailwindConfig);
export const getBreakpointValue = (value) => // export const getBreakpointValue = (value) =>
+fullConfig.theme.screens[value].slice(0, fullConfig.theme.screens[value].indexOf('px')); // +fullConfig.theme.screens[value].slice(0, fullConfig.theme.screens[value].indexOf('px'));
export const getCurrentBreakpoint = () => { // export const getCurrentBreakpoint = () => {
let currentBreakpoint; // let currentBreakpoint;
let biggestBreakpointValue = 0; // let biggestBreakpointValue = 0;
for (const breakpoint of Object.keys(fullConfig.theme.screens)) { // for (const breakpoint of Object.keys(fullConfig.theme.screens)) {
const breakpointValue = getBreakpointValue(breakpoint); // const breakpointValue = getBreakpointValue(breakpoint);
if (breakpointValue > biggestBreakpointValue && window.innerWidth >= breakpointValue) { // if (breakpointValue > biggestBreakpointValue && window.innerWidth >= breakpointValue) {
biggestBreakpointValue = breakpointValue; // biggestBreakpointValue = breakpointValue;
currentBreakpoint = breakpoint; // currentBreakpoint = breakpoint;
} // }
} // }
return currentBreakpoint; // return currentBreakpoint;
}; // };
export default function Nav({ navVisible, setNavVisible }) { export default function Nav({ navVisible, setNavVisible }) {
const [isHovering, setIsHovering] = useState(false); const [isHovering, setIsHovering] = useState(false);
@ -146,9 +146,23 @@ export default function Nav({ navVisible, setNavVisible }) {
setNavVisible((prev) => !prev); setNavVisible((prev) => !prev);
}; };
// useEffect(() => {
// let currentBreakpoint = getCurrentBreakpoint();
// if (currentBreakpoint === 'sm') {
// setNavVisible(false);
// } else {
// setNavVisible(true);
// }
// }, [conversationId, setNavVisible]);
const isMobile = () => {
const userAgent = typeof window.navigator === 'undefined' ? '' : navigator.userAgent;
const mobileRegex = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Mobile|mobile|CriOS/i;
return mobileRegex.test(userAgent);
};
useEffect(() => { useEffect(() => {
let currentBreakpoint = getCurrentBreakpoint(); if (isMobile()) {
if (currentBreakpoint === 'sm') {
setNavVisible(false); setNavVisible(false);
} else { } else {
setNavVisible(true); setNavVisible(true);