Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2025-09-22 06:00:56 +02: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"
>
<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 && <SearchBar clearSearch={clearSearch} />}
</Menu.Item>
<Menu.Item>
{isSearchEnabled && (
<Menu.Item>
<SearchBar clearSearch={clearSearch} />
</Menu.Item>
)}
<Menu.Item as="div">
<NavLink
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',
@ -84,10 +86,10 @@ export default function NavLinks({ clearSearch, isSearchEnabled }) {
/>
</Menu.Item>
<div className="my-1.5 h-px bg-white/20" role="none" />
<Menu.Item>
<Menu.Item as="div">
<DarkMode />
</Menu.Item>
<Menu.Item>
<Menu.Item as="div">
<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"
svg={() => <TrashIcon />}
@ -96,7 +98,7 @@ export default function NavLinks({ clearSearch, isSearchEnabled }) {
/>
</Menu.Item>
<div className="my-1.5 h-px bg-white/20" role="none" />
<Menu.Item>
<Menu.Item as="div">
<Logout />
</Menu.Item>
</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 { cn } from '~/utils/';
import resolveConfig from 'tailwindcss/resolveConfig';
const tailwindConfig = import('../../../tailwind.config.cjs');
const fullConfig = resolveConfig(tailwindConfig);
// import resolveConfig from 'tailwindcss/resolveConfig';
// const tailwindConfig = import('../../../tailwind.config.cjs');
// const fullConfig = resolveConfig(tailwindConfig);
export const getBreakpointValue = (value) =>
+fullConfig.theme.screens[value].slice(0, fullConfig.theme.screens[value].indexOf('px'));
// export const getBreakpointValue = (value) =>
// +fullConfig.theme.screens[value].slice(0, fullConfig.theme.screens[value].indexOf('px'));
export const getCurrentBreakpoint = () => {
let currentBreakpoint;
let biggestBreakpointValue = 0;
for (const breakpoint of Object.keys(fullConfig.theme.screens)) {
const breakpointValue = getBreakpointValue(breakpoint);
if (breakpointValue > biggestBreakpointValue && window.innerWidth >= breakpointValue) {
biggestBreakpointValue = breakpointValue;
currentBreakpoint = breakpoint;
}
}
return currentBreakpoint;
};
// export const getCurrentBreakpoint = () => {
// let currentBreakpoint;
// let biggestBreakpointValue = 0;
// for (const breakpoint of Object.keys(fullConfig.theme.screens)) {
// const breakpointValue = getBreakpointValue(breakpoint);
// if (breakpointValue > biggestBreakpointValue && window.innerWidth >= breakpointValue) {
// biggestBreakpointValue = breakpointValue;
// currentBreakpoint = breakpoint;
// }
// }
// return currentBreakpoint;
// };
export default function Nav({ navVisible, setNavVisible }) {
const [isHovering, setIsHovering] = useState(false);
@ -146,9 +146,23 @@ export default function Nav({ navVisible, setNavVisible }) {
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(() => {
let currentBreakpoint = getCurrentBreakpoint();
if (currentBreakpoint === 'sm') {
if (isMobile()) {
setNavVisible(false);
} else {
setNavVisible(true);