Resolved Search bar closing issue

thecuriousteam · Oct 4, 2023 · f3a09b7 · f3a09b7
1 parent ac07ed4
commit f3a09b7
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 6 deletions.
diff --git a/src/Components/Search.jsx b/src/Components/Search.jsx
@@ -1,19 +1,30 @@
-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";
 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);
     };
     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
@@ -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" /> */}