done mobile navbar and users

frontend/src/app/components/navbar/navleft/HeaderDropdown.jsx

@@ -1,19 +1,19 @@
 import React, { useState } from "react";
 import CreateIcon from "../../icons/create";
 import styles from "./styles.module.css";
+import useIsMobile from "@/app/hooks/useIsMobile";
 
-const HeaderDropdown = () => {
-  const orgList = [
-    { name: "Project Moonshot Inc." },
-    { name: "Organization X" },
-    { name: "Organization Y" },
-    { name: "Organization Z" },
-  ];
-
-  const [selectedOrg, setSelectedOrg] = useState(null);
+const HeaderDropdown = ({
+  setOpen,
+  sampleData,
+  selectedOrg,
+  setSelectedOrg,
+}) => {
+  const isMobile = useIsMobile();
 
   const handleOrgSelect = (index) => {
     setSelectedOrg(index);
+    setOpen(false);
   };
 
   return (
@@ -25,7 +25,7 @@ const HeaderDropdown = () => {
           <p>Organization</p>
           <div className={styles.createBtn}>
             <p>Create</p>
-            <CreateIcon />
+            {isMobile ? <CreateIcon width="24" height="24" /> : <CreateIcon />}
           </div>
         </div>
         {/* Search */}
@@ -73,12 +73,15 @@ const HeaderDropdown = () => {
 
       {/* Select Options */}
       <div className={styles.optionsContainer}>
-        {orgList.map((org, index) => {
+        {sampleData.map((org, index) => {
           return (
             <div
               className={styles.orgList}
               key={index}
-              onClick={() => handleOrgSelect(index)}
+              onClick={(e) => {
+                e.stopPropagation();
+                handleOrgSelect(index);
+              }}
             >
               <div
                 className={`${styles.iconTxt} ${index === selectedOrg ? styles.active : ""}`}