Merge pull request #244 from GOURAVSINGH19/bug#201

done#201
SUGAM-ARORA · Jun 6, 2024 · 770ac72 · 770ac72
2 parents 2abaedb + 103b8fd
commit 770ac72
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 33 deletions.
diff --git a/src/Components/Container.css b/src/Components/Container.css
@@ -19,13 +19,23 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
+  position: relative;
 }
 
 .topContainer .inputBox {
   width: 350px;
   height: 45px;
   position: relative;
 }
+.searchbtn{
+  position: absolute;
+  top: 15px;
+  left: 10px;
+  color: white;
+  font-size: 22px;
+  cursor: pointer;
+}
+
 .inputBox #search_results {
     max-height: 24rem;
     min-width: 20rem;
@@ -38,6 +48,7 @@
     scrollbar-color: rgb(128, 128, 128) transparent;
     scrollbar-width: 5px;
 }
+
 .inputBox #search_results div{
   padding: 0.5rem 1rem;
   border-bottom: 0.1rem solid #ffffff59;

diff --git a/src/Components/TopContainer.js b/src/Components/TopContainer.js
@@ -9,9 +9,15 @@ function TopContainer() {
   const [searchResult, setSearchResult] = useState(null);
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
   const dropdownRef = useRef(null);
+  const searchbar = useRef(null);
+
   let tDrop = false;
   let tSearch = false;
 
+  const searchbtnclick = () => {
+    searchbar.current.focus();
+  };
+
   useEffect(() => {
     // Add event listener to detect clicks anywhere on the page
     window.addEventListener("click", handleOutsideClick);
@@ -55,11 +61,11 @@ function TopContainer() {
   };
 
   const searchDropDown = () => {
-    if(!tSearch){
-      document.getElementById("search_input").style.display="block";
+    if (!tSearch) {
+      document.getElementById("search_input").style.display = "block";
       tSearch = true;
-    } else{
-      document.getElementById("search_input").style.display="none";
+    } else {
+      document.getElementById("search_input").style.display = "none";
       tSearch = false;
     }
   };
@@ -71,33 +77,31 @@ function TopContainer() {
       setIsMobile(window.innerWidth < 524);
     };
 
-    window.addEventListener('resize', handleResize);
+    window.addEventListener("resize", handleResize);
 
     // Clean up the event listener on component unmount
     return () => {
-      window.removeEventListener('resize', handleResize);
+      window.removeEventListener("resize", handleResize);
     };
   }, []);
 
   return (
-    <div className='topContainer'>
-      <div className='inputBox'>
+    <div className="topContainer">
+      <div className="inputBox">
         <input
-          className="search_input"
-          id="search_input"
-          type='text'
-          placeholder='Search projects, users'
+          ref={searchbar}
+          type="text"
+          placeholder="Search projects, users"
           onChange={(e) => setInput(e.target.value)}
         />
-        <a className="search_icon" onClick={isMobile ? searchDropDown : null}
-        style={{ cursor: isMobile ? 'pointer' : 'default' }}>
+        <i style={{ cursor: isMobile ? 'pointer' : 'default' }} onClick={() => searchbtnclick()} className="searchbtn">
           <BiSearchAlt />
-        </a>
+        </i>
         {searchResult ? (
-          <div id='search_results'>
+          <div id="search_results">
             {searchResult.map((item, index) => (
               <div key={`parent_container${index}`}>
-                <p id='search_result_title' key={`title${index}`}>
+                <p id="search_result_title" key={`title${index}`}>
                   {item.title}
                 </p>
                 <span key={`category${index}`}>{item.category}</span>
@@ -109,52 +113,54 @@ function TopContainer() {
         )}
       </div>
 
-      <div className='profileContainer'>
-        <a href="/pricing"><button className="go-pro-btn">Go Pro</button></a>
-        <div className='notification-container' ref={dropdownRef}>
-          <div className='profileIcon' onClick={toggleDropdown}>
+      <div className="profileContainer">
+        <a href="/pricing">
+          <button className="go-pro-btn">Go Pro</button>
+        </a>
+        <div className="notification-container" ref={dropdownRef}>
+          <div className="profileIcon" onClick={toggleDropdown}>
             <FaBell />
           </div>
           {isDropdownOpen && (
-            <div className='dropdown-content'>
+            <div className="dropdown-content">
               {/* Notification items */}
-              <div className='notification-item'>
+              <div className="notification-item">
                 User "JohnDoe" has uploaded a new project titled "Introduction
                 to Machine Learning." Check it out now!
               </div>
-              <div className='notification-item'>
+              <div className="notification-item">
                 User "JaneSmith" has commented on your project "Data
                 Visualization with D3.js." View the comment now.
               </div>
-              <div className='notification-item'>
+              <div className="notification-item">
                 User "TechMaster" has updated the project "Web Development with
                 React.js" with bug fixes. Explore the updated version.
               </div>
-              <div className='notification-item'>
+              <div className="notification-item">
                 Congratulations! Your project "Artificial Intelligence in
                 Robotics" has been approved by the moderators. It's now live on
                 the platform.
               </div>
-              <div className='notification-item'>
+              <div className="notification-item">
                 User "CodeNinja" has sent you a collaboration request for the
                 project "Cybersecurity Best Practices." Accept or decline the
                 request.
               </div>
-              <p className='seeAll'>See all notifications</p>
+              <p className="seeAll">See all notifications</p>
             </div>
           )}
         </div>
 
-        <div className='profileImage'>
-          <img src={women} alt='' />
+        <div className="profileImage">
+          <img src={women} alt="" />
         </div>
 
-        <p className='profileName'>Sugam Arora</p>
-        <a className='menuChevron' id='menuChevron' onClick={toggleDrop}>
+        <p className="profileName">Sugam Arora</p>
+        <a className="menuChevron" id="menuChevron" onClick={toggleDrop}>
           <FaChevronDown />
         </a>
 
-        <div className='menuContainer' id='menuContainer'>
+        <div className="menuContainer" id="menuContainer">
           <ul>
             <li>My Profile</li>
             <li>Theme</li>