From 6c05da0988d9aec4d65fe29ed830fc613c61458f Mon Sep 17 00:00:00 2001
From: Mathias Wagner <germannewsmaker@gmail.com>
Date: Fri, 2 Jun 2023 15:40:20 +0200
Subject: [PATCH] The search box in the SidebarContent.jsx now works

---
 .../SidebarContent/SidebarContent.jsx         | 25 ++++++++++++-------
 1 file changed, 16 insertions(+), 9 deletions(-)

diff --git a/client/src/common/components/Sidebar/components/SidebarContent/SidebarContent.jsx b/client/src/common/components/Sidebar/components/SidebarContent/SidebarContent.jsx
index 03da0a6..997e824 100644
--- a/client/src/common/components/Sidebar/components/SidebarContent/SidebarContent.jsx
+++ b/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) => (
-                    <PowerItemGroup name={route} key={route}>
-                        {routes[route].map((route) => (
-                            <PowerItem icon={route.icon} name={route.name} path={route.path} key={route.path} />
-                        ))}
-                    </PowerItemGroup>
-                ))}
+                {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}>
+                            {filteredRoutes.map((route) => (
+                                <PowerItem icon={route.icon} name={route.name} path={route.path} key={route.path} />
+                            ))}
+                        </PowerItemGroup>
+                    );
+                })}
             </div>
+
         </div>
     );
 }
\ No newline at end of file