header update

frontend/src/app/components/header/Header.jsx

@@ -1,22 +1,33 @@
+"use client";
+
 import React from "react";
 import styles from "./styles.module.css";
+import { useState } from "react";
 
 const Header = () => {
+  const [open, setOpen] = useState(false);
   return (
     // Main Container
-    <nav className={styles.headerContainer}>
-      {/* Logo and Org */}
-      <div className={styles.logoContainer}>
-        {/* Icon */}
+    <div className={styles.mainContainer}>
+      {/* Organization */}
+      <div className={styles.organizationContainer}>
+        <div className={styles.orgContainer}>
+          {/* Logo */}
           <div className={styles.logo}></div>
-        {/* Organization and Dropdown */}
           <div className={styles.orgName}>
-          {/* Header */}
-          <div>
             <p>Organization</p>
-          </div>
+            <div
+              className={styles.dropdownContainer}
+              onClick={() => setOpen(!open)}
+            >
               {/* Dropdown */}
+              {open && (
                 <div className={styles.dropdown}>
+                  <div>ahdas</div>
+                </div>
+              )}
+              {/* Button */}
+              <div className={styles.dropdownBtn}>
                 <p>Project Moonshot Inc.</p>
                 <div>
                   <svg
@@ -37,11 +48,12 @@ const Header = () => {
               </div>
             </div>
           </div>
-      {/* Search */}
-      <div>
-        <input type="text" name="search" id="" placeholder="Search" />
         </div>
-    </nav>
+      </div>
+
+      {/* Profile */}
+      <div className={styles.profileContainer}></div>
+    </div>
   );
 };
 

frontend/src/app/components/header/styles.module.css

@@ -1,5 +1,4 @@
-.headerContainer {
-  background-color: #ff0000;
+.mainContainer {
   display: flex;
   height: 84px;
   padding: 12px 24px;
@@ -9,8 +8,11 @@
   border-bottom: 1px solid #2c2d3d;
   border-bottom: 1px solid color(display-p3 0.1725 0.1765 0.2353);
 }
-.logoContainer {
-  background-color: orange;
+.organizationContainer {
+  display: flex;
+  align-items: center;
+}
+.orgContainer {
   display: flex;
   padding: 6px;
   align-items: center;
@@ -36,7 +38,7 @@
   align-items: flex-start;
   gap: 4px;
 }
-.orgName p {
+.orgName > p {
   color: #eeeffd;
   color: color(display-p3 0.9333 0.9373 0.9882);
   font-family: Inter;
@@ -46,13 +48,18 @@
   line-height: normal;
 }
 
-.dropdown {
+.dropdownContainer {
+  width: 201px;
+  height: 28px;
+  cursor: pointer;
+  position: relative;
+}
+.dropdownBtn {
   display: inline-flex;
   align-items: center;
   gap: 16px;
 }
-
-.dropdown > p {
+.dropdownBtn > p {
   color: #85869b;
   color: color(display-p3 0.5216 0.5255 0.6);
   font-family: Inter;
@@ -61,19 +68,48 @@
   font-weight: 500;
   line-height: normal;
 }
-
-.dropdown > div {
+.dropdownBtn > div {
   display: flex;
   padding: 8px;
   justify-content: center;
   align-items: center;
   gap: 10px;
+  border-radius: 100px;
 }
-
-.dropdown > div > button > svg {
-  width: 9.922px;
-  height: 4.961px;
-  stroke: #959aff;
-  stroke-width: 1px;
-  stroke: color(display-p3 0.5892 0.6031 0.9766);
+.dropdownBtn > div:hover {
+  border-radius: 100px;
+  border: 1px solid #b8badc;
+  border: 1px solid color(display-p3 0.7238 0.7303 0.8531);
+  background: linear-gradient(
+    180deg,
+    rgba(149, 154, 255, 0.25) 0%,
+    rgba(88, 91, 151, 0.25) 100%
+  );
+  background: linear-gradient(
+    180deg,
+    color(display-p3 0.5892 0.6031 0.9766 / 0.25) 0%,
+    color(display-p3 0.3479 0.3561 0.5766 / 0.25) 100%
+  );
+}
+/* Dropdown */
+.dropdown {
+  display: inline-flex;
+  padding: 16px;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 12px;
+  border-radius: 6px;
+  background: #2d3143;
+  background: color(display-p3 0.1804 0.1922 0.2588);
+  box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.25);
+  box-shadow: 0 2px 15px 0 color(display-p3 0 0 0 / 0.25);
+  position: absolute;
+  top: 100%;
+  left: 0;
+}
+.profileContainer {
+  display: flex;
+  height: 44px;
+  flex-direction: column;
+  align-items: flex-end;
 }