Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2026-01-05 01:58:50 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

feat: Add SearchBar component to Nav (#760)

Browse source 
* feat: Add SearchBar component to Nav

This commit adds the SearchBar component to the navigation bar in order to enable search functionality. Now users can easily search for specific items within the navigation.

* Refactor Nav and SearchBar components

The commit refactors the Nav component by moving the SearchBar component within the Nav component. This change ensures that the SearchBar is rendered only when the isSearchEnabled condition is true.

In addition, the commit also modifies the styling of the SearchBar component by adding rounded corners and border to enhance the visual appearance.

* Update gitignore

* C

Refactor search bar styles

This commit refactors the styles of the search bar component in the Nav component. The border color and hover background color have been modified to improve the visual appearance.

* Fix margin

* Rename Logout.jsx to Logout.tsx and update import statements accordingly.
Replace the use of Recoil and store with useLocalize hook for localization.
Update the usage of localize function by removing the lang parameter.
This commit is contained in:
Anirudh 2023-08-05 19:54:56 +05:30 • committed by GitHub
parent 1f5a79f073
commit 173b8ce2da
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 13 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -2,20 +2,19 @@ import { Download } from 'lucide-react';
import { useRecoilValue } from 'recoil';
import { Fragment, useState } from 'react';
import { Menu, Transition } from '@headlessui/react';
import SearchBar from './SearchBar';
import ClearConvos from './ClearConvos';
import Settings from './Settings';
import NavLink from './NavLink';
import Logout from './Logout';
import { ExportModel } from './ExportConversation';
import { LinkIcon, DotsIcon, GearIcon, TrashIcon } from '~/components';
import { LinkIcon, DotsIcon, GearIcon } from '~/components';
import { localize } from '~/localization/Translation';
import { useAuthContext } from '~/hooks/AuthContext';
import { cn } from '~/utils/';
import store from '~/store';
export default function NavLinks({ clearSearch, isSearchEnabled }) {
export default function NavLinks() {
const [showExports, setShowExports] = useState(false);
const [showClearConvos, setShowClearConvos] = useState(false);
const [showSettings, setShowSettings] = useState(false);
@ -76,11 +75,6 @@ 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">
{isSearchEnabled && (
<Menu.Item>
<SearchBar clearSearch={clearSearch} />
</Menu.Item>
)}
<Menu.Item as="div">
<NavLink
className={cn(
@ -93,14 +87,6 @@ export default function NavLinks({ clearSearch, isSearchEnabled }) {
/>
</Menu.Item>
<div className="my-1.5 h-px bg-white/20" role="none" />
<Menu.Item as="div">
<NavLink
className="flex w-full cursor-pointer items-center gap-3 rounded-none px-3 py-3 text-sm text-white transition-colors duration-200 hover:bg-gray-700"
svg={() => <TrashIcon />}
text={localize(lang, 'com_nav_clear_conversation')}
clickHandler={() => setShowClearConvos(true)}
/>
</Menu.Item>
<Menu.Item as="div">
<NavLink
className="flex w-full cursor-pointer items-center gap-3 rounded-none px-3 py-3 text-sm text-white transition-colors duration-200 hover:bg-gray-700"