CERBERUS/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2026-08-28 12:44:28 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 10

🧭 fix: Mobile Sidebar Navigation on Projects View (#13647)

Browse source 
* 🧭 fix: Mobile Sidebar Navigation on Projects View

* 🧭 fix: Align Sidebar Toggle with JS Mobile Breakpoint at 768px
This commit is contained in:
Danny Avila 2026-06-10 09:07:21 -04:00 • committed by GitHub
parent 9628930958
commit 87cdd37932
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 11 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

17
client/src/components/Projects/ProjectsView.tsx
View file

@ -1,14 +1,15 @@
import { useDeferredValue, useEffect, useId, useMemo, useState } from 'react';
import * as Ariakit from '@ariakit/react';
import { ArrowUpDown, Check, Folder, Plus, Search } from 'lucide-react';
import { useNavigate, useSearchParams } from 'react-router-dom';
import { ArrowUpDown, Check, Folder, Plus, Search } from 'lucide-react';
import { Input, Button, Spinner, DropdownPopup, useMediaQuery } from '@librechat/client';
import type { TChatProject } from 'librechat-data-provider';
import { Input, Button, Spinner, DropdownPopup } from '@librechat/client';
import type { MenuItemProps, RenderProp } from '~/common';
import OpenSidebar from '~/components/Chat/Menus/OpenSidebar';
import { useProjectsInfiniteQuery } from '~/data-provider';
import ProjectCreateDialog from './ProjectCreateDialog';
import { useLocalize } from '~/hooks';
import { cn } from '~/utils';
import ProjectCreateDialog from './ProjectCreateDialog';
type ProjectSort = 'name' | 'createdAt' | 'lastConversationAt';
@ -49,6 +50,7 @@ export default function ProjectsView() {
const sortMenuId = useId();
const [isSortMenuOpen, setIsSortMenuOpen] = useState(false);
const deferredSearch = useDeferredValue(search);
const isSmallScreen = useMediaQuery('(max-width: 768px)');
const { data, fetchNextPage, isFetchingNextPage, isLoading } = useProjectsInfiniteQuery({
search: deferredSearch || undefined,
@ -103,9 +105,12 @@ export default function ProjectsView() {
<main className="flex h-full min-h-0 flex-col overflow-auto bg-surface-primary text-text-primary">
<div className="container mx-auto flex w-full max-w-4xl flex-1 flex-col gap-6 px-4 py-8 md:px-6 lg:pt-12">
<div className="flex flex-wrap items-center justify-between gap-3">
<h1 className="text-2xl font-bold tracking-tight text-text-primary md:text-3xl">
{localize('com_ui_projects')}
</h1>
<div className="flex min-w-0 items-center gap-2.5">
{isSmallScreen ? <OpenSidebar /> : null}
<h1 className="text-2xl font-bold tracking-tight text-text-primary md:text-3xl">
{localize('com_ui_projects')}
</h1>
</div>
<div className="flex items-center gap-2">
<span className="hidden text-sm text-text-secondary sm:inline">
{localize('com_ui_sort_by')}