Merge pull request #73 from yashmandi/bug/notification-icon

[FIX] Fixed Notification Icon Function & Added Dropdown Close Functionality

src/Components/Container.css

@@ -153,6 +153,56 @@
   color: #f1f1f1;
 }
 
+.notification-container {
+  position: relative;
+}
+
+.profileIcon {
+  cursor: pointer;
+}
+
+.dropdown-content {
+  position: absolute;
+  top: 100%;
+  right: 0;
+  background-color: #19162c;
+  border-radius: 10px;
+  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.4);
+  padding: 8px;
+  z-index: 1;
+  width: 400px; /* Adjust width as needed */
+  padding: 20px;
+}
+
+.notification-item {
+  padding: 8px 0;
+  border-bottom: 1px solid #eee;
+}
+
+.notification-item:last-child {
+  border-bottom: none;
+}
+
+.seeAll {
+  text-align: center;
+  margin-top: 10px;
+  cursor: pointer;
+  font-weight: bold;
+}
+
+.notification-item {
+  padding: 8px 0;
+  border-bottom: 1px solid #121026;
+  transition: background-color 0.3s ease; /* Add transition for smooth color change */
+  cursor: pointer;
+}
+
+.notification-item:hover {
+  background-color: #121026; /* Change background color on hover */
+
+}
+
+
 @media screen and (max-width: 525px) {
   .container {
     width: calc(100% - 68px);

src/Components/TopContainer.js

@@ -1,23 +1,33 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useState, useRef } from "react";
 import { BiSearchAlt } from "react-icons/bi";
 import { FaBell, FaChevronDown } from "react-icons/fa";
 import women from "../img/women.jpg";
 
 function TopContainer() {
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const dropdownRef = useRef(null);
+
   useEffect(() => {
-    const mouseTarget = document.getElementById("menuChevron");
-    const menuContainer = document.getElementById("menuContainer");
-    mouseTarget.addEventListener("mouseenter", () => {
-      mouseTarget.style.transform = "rotate(180deg)";
-      menuContainer.style.transform = "translateX(0px)";
-    });
-
-    menuContainer.addEventListener("mouseleave", () => {
-      mouseTarget.style.transform = "rotate(0deg)";
-      menuContainer.style.transform = "translateX(300px)";
-    });
+    // Add event listener to detect clicks anywhere on the page
+    window.addEventListener("click", handleOutsideClick);
+
+    // Cleanup function to remove the event listener
+    return () => {
+      window.removeEventListener("click", handleOutsideClick);
+    };
   }, []);
 
+  const toggleDropdown = () => {
+    setIsDropdownOpen(!isDropdownOpen);
+  };
+
+  const handleOutsideClick = (event) => {
+    // Check if the clicked element is outside the dropdown content
+    if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+      setIsDropdownOpen(false);
+    }
+  };
+
   return (
     <div className="topContainer">
       <div className="inputBox">
@@ -28,12 +38,44 @@ function TopContainer() {
       </div>
 
       <div className="profileContainer">
-        <i className="profileIcon">
-          <FaBell />
-        </i>
+        <div className="notification-container" ref={dropdownRef}>
+          <div className="profileIcon" onClick={toggleDropdown}>
+            <FaBell />
+          </div>
+          {isDropdownOpen && (
+            <div className="dropdown-content">
+              {/* Notification items */}
+              <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">
+                User "JaneSmith" has commented on your project "Data
+                Visualization with D3.js." View the comment now.
+              </div>
+              <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">
+                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">
+                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>
+            </div>
+          )}
+        </div>
+
         <div className="profileImage">
           <img src={women} alt="" />
         </div>
+
         <p className="profileName">Sugam Arora</p>
         <i className="menuChevron" id="menuChevron">
           <FaChevronDown />