Mathias/PowerTools
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

The search box in the SidebarContent.jsx now works

Browse Source
This commit is contained in:
Mathias Wagner 2023-06-02 15:40:20 +02:00
parent 3518b9b8a5
commit 6c05da0988
Signed by: Mathias
GPG Key ID: B8DC354B0A1F5B44
1 changed files with 16 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
client/src/common/components/Sidebar/components/SidebarContent/SidebarContent.jsx
View File

@ -4,10 +4,11 @@ import "./styles.sass";
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
import {faSearch} from "@fortawesome/free-solid-svg-icons";
import {routes} from "@/common/routes";
import {useEffect, useRef} from "react";
import {useEffect, useRef, useState} from "react";
export const SidebarContent = () => {
const searchRef = useRef();
const [search, setSearch] = useState("");
useEffect(() => {
const listener = (e) => {
@ -25,18 +26,24 @@ export const SidebarContent = () => {
<div className="sidebar-content">
<div className="search-item">
<FontAwesomeIcon icon={faSearch}/>
<input type="text" placeholder="Tool suchen..." ref={searchRef}/>
<input type="text" placeholder="Tool suchen..." ref={searchRef} value={search}
onChange={(e) => setSearch(e.target.value)}/>
</div>
<div className="power-item-area">
{Object.keys(routes).map((route) => (
{Object.keys(routes).map((route) => {
const filteredRoutes = routes[route].filter((route) => route.name.toLowerCase().includes(search.toLowerCase()));
if (filteredRoutes.length === 0) return null;
return (
<PowerItemGroup name={route} key={route}>
{routes[route].map((route) => (
{filteredRoutes.map((route) => (
<PowerItem icon={route.icon} name={route.name} path={route.path} key={route.path} />
))}
</PowerItemGroup>
))}
);
})}
</div>
</div>
);
}