changed navbar

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

@@ -0,0 +1,112 @@
+import React, { useState } from "react";
+import CreateIcon from "../../icons/create";
+import styles from "./styles.module.css";
+
+const HeaderDropdown = () => {
+  const orgList = [
+    { name: "Project Moonshot Inc." },
+    { name: "Organization X" },
+    { name: "Organization Y" },
+    { name: "Organization Z" },
+  ];
+
+  const [selectedOrg, setSelectedOrg] = useState(null);
+
+  const handleOrgSelect = (index) => {
+    setSelectedOrg(index);
+  };
+
+  return (
+    <div className={styles.dropdown}>
+      {/* Organization Header and Search  */}
+      <div className={styles.orgSearchContainer}>
+        {/* Header */}
+        <div className={styles.createBtnContainer}>
+          <p>Organization</p>
+          <div className={styles.createBtn}>
+            <p>Create</p>
+            <CreateIcon />
+          </div>
+        </div>
+        {/* Search */}
+        <div className={styles.srchInputContainer}>
+          <div className={styles.srchInputGroup}>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="18"
+              height="18"
+              viewBox="0 0 18 18"
+              fill="none"
+            >
+              <g clipPath="url(#clip0_23_1333)">
+                <path
+                  d="M7.79548 14.424C11.4568 14.424 14.4249 11.4559 14.4249 7.7945C14.4249 4.13315 11.4568 1.16504 7.79548 1.16504C4.13412 1.16504 1.16602 4.13315 1.16602 7.7945C1.16602 11.4559 4.13412 14.424 7.79548 14.424Z"
+                  stroke="#858699"
+                  strokeWidth="1.5"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                />
+                <path
+                  d="M16.8359 16.835L12.6172 12.6162"
+                  stroke="#858699"
+                  strokeWidth="1.5"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                />
+              </g>
+              <defs>
+                <clipPath id="clip0_23_1333">
+                  <rect width="18" height="18" fill="white" />
+                </clipPath>
+              </defs>
+            </svg>
+            <input
+              className={styles.placeholderTxt}
+              type="text"
+              name="search"
+              id=""
+              placeholder="Search"
+            />
+          </div>
+        </div>
+      </div>
+
+      {/* Select Options */}
+      <div className={styles.optionsContainer}>
+        {orgList.map((org, index) => {
+          return (
+            <div
+              className={styles.orgList}
+              key={index}
+              onClick={() => handleOrgSelect(index)}
+            >
+              <div
+                className={`${styles.iconTxt} ${index === selectedOrg ? styles.active : ""}`}
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="20"
+                  height="20"
+                  viewBox="0 0 20 20"
+                  fill="none"
+                >
+                  <path
+                    d="M7.87565 14.8747L3.20898 10.208L4.10482 9.31217L7.87565 13.083L15.8757 5.08301L16.7715 5.97884L7.87565 14.8747Z"
+                    fill="#8287FF"
+                    style={{
+                      fill: "#8287FF",
+                      fillOpacity: 1,
+                    }}
+                  />
+                </svg>
+                <p>{org.name}</p>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+export default HeaderDropdown;