From f3a09b71b7496f77160f9c711eed75eb4a919546 Mon Sep 17 00:00:00 2001
From: Sravaani <140899293+Sravaani@users.noreply.github.com>
Date: Wed, 4 Oct 2023 13:58:01 +0530
Subject: [PATCH] Resolved Search bar closing issue

---
 src/Components/Search.jsx       | 21 ++++++++++++++++-----
 src/layouts/sidebar/SubMenu.jsx |  2 +-
 2 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/src/Components/Search.jsx b/src/Components/Search.jsx
index a8bfead..06e3433 100644
--- a/src/Components/Search.jsx
+++ b/src/Components/Search.jsx
@@ -1,4 +1,4 @@
-import React, {useState} from 'react';
+import React, {useEffect, useState} from 'react';
 import { subMenusList } from '../Constants';
 import {CiSearch } from "react-icons/ci";
 import { AiOutlineDoubleRight } from "react-icons/ai";
@@ -6,6 +6,7 @@ import { NavLink } from 'react-router-dom';
 
 const Search = () => {
     const [searchInput, setSearchInput] = useState("");
+    const [isSearchBarOpen, setIsSearchBarOpen] = useState(false);
     const handleChange = (e) => {
       e.preventDefault();
       setSearchInput(e.target.value);
@@ -13,7 +14,17 @@ const Search = () => {
     const filteredContent = subMenusList.filter(menu => {
         const content = menu.title.toLowerCase();
         return content.includes(searchInput.toLowerCase());
-    })
+    });
+
+   const selectOption = (name) => {
+     setSearchInput(name);
+     setIsSearchBarOpen(false)
+   };
+  
+  //  useEffect(() => {
+  //    setSearchInput("");
+  //  },[selectOption])
+
   return (
     <>
         <div className="relative">
@@ -25,13 +36,13 @@ const Search = () => {
         onChange={handleChange}
         value={searchInput} />
         </div>
-        {searchInput && (
-            <div className='bg-[#fff] text-black absolute w-[264px] h-auto pl-10 pb-5'>
+        {(searchInput && !isSearchBarOpen) &&  (
+            <div className='bg-[#fff] text-black absolute w-[264px] h-auto pl-10 pb-5' style={!isSearchBarOpen ? {paddingBottom:0}: ""}>
             {filteredContent.map((menu,i) => (
               menu.children.map(child => (
                 <div key = {i}>
                 <NavLink to = {`${menu.name}/${child.name}`}>
-                <h3 className='pb-5 pt-5'>{menu.name}</h3> 
+                <h3 className='pb-5 pt-5'onClick={()=>selectOption(menu.name)}>{menu.name}</h3> 
                 </NavLink>
                 </div>
               ))
diff --git a/src/layouts/sidebar/SubMenu.jsx b/src/layouts/sidebar/SubMenu.jsx
index 40de7cd..3bd67ee 100644
--- a/src/layouts/sidebar/SubMenu.jsx
+++ b/src/layouts/sidebar/SubMenu.jsx
@@ -12,7 +12,7 @@ const SubMenu = ({ data }) => {
   return (
     <>
     <li
-        className={`link ${pathname.includes(data.name) && "text-blue-600"}`}
+        className={`link ${pathname.includes(data.name) && "text-white-600"}`}
         onClick={() => setSubMenuOpen(!subMenuOpen)}
       >
         {/* <data.icon size={23} className="min-w-max" /> */}