done mobile navbar and users

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

@@ -1,43 +1,62 @@
 import React, { useState } from "react";
 import HeaderDropdown from "./HeaderDropdown";
 import styles from "./styles.module.css";
+import ArrowDownIcon from "../../icons/arrowDown";
+import useIsMobile from "@/app/hooks/useIsMobile";
 
 const Header = () => {
   const [open, setOpen] = useState(false);
+  const [selectedOrg, setSelectedOrg] = useState(0);
+  const sampleData = [
+    { name: "Project Moonshot Inc." },
+    { name: "Organization X" },
+    { name: "Organization Y" },
+    { name: "Organization Z" },
+  ];
+
+  const isMobile = useIsMobile();
   return (
     <>
       {/* Organization Header */}
       <div className={styles.organizationContainer}>
-        <div className={styles.orgContainer}>
+        <div
+          className={styles.orgContainer}
+          onClick={isMobile ? () => setOpen(!open) : null} //toggler entire header
+        >
           {/* Logo */}
           <div className={styles.orgLogo}></div>
           <div className={styles.orgName}>
-            <p>Organization</p>
+            <p
+              className={`${styles.orgNameText} ${isMobile && open ? styles.orgNameActive : ""}`}
+            >
+              Organization
+            </p>
             <div className={styles.dropdownContainer}>
               {/* Dropdown Menu*/}
-              {open && <HeaderDropdown />}
-
+              {open && (
+                <HeaderDropdown
+                  setOpen={setOpen}
+                  sampleData={sampleData}
+                  selectedOrg={selectedOrg}
+                  setSelectedOrg={setSelectedOrg}
+                />
+              )}
               {/* Toggle Button */}
               <div
                 className={styles.dropdownBtn}
-                onClick={() => setOpen(!open)}
+                onClick={() => {
+                  if (!isMobile) setOpen(!open); //toggle only org
+                }}
               >
-                <p>Project Moonshot Inc.</p>
-                <div>
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    width="12"
-                    height="12"
-                    viewBox="0 0 12 12"
-                    fill="none"
-                  >
-                    <path
-                      d="M1.03906 3.51953L6.00031 8.48083L10.9616 3.51953"
-                      stroke="#969AF9"
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                    />
-                  </svg>
+                <p
+                  className={`${styles.projectName} ${isMobile && open ? styles.projectNameActive : ""}`}
+                >
+                  {sampleData[selectedOrg].name}
+                </p>
+                <div
+                  className={`${styles.arrowIcon} ${isMobile && open ? styles.arrowRotate : ""}`}
+                >
+                  <ArrowDownIcon width={12} height={12} color="#969AF9" />
                 </div>
               </div>
             </div>