The search box in the SidebarContent.jsx now works

client/src/common/components/Sidebar/components/SidebarContent/SidebarContent.jsx

@@ -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>
     );
 }