From 2ccd9f5c26f9131788e06da46e7b68b5f7798610 Mon Sep 17 00:00:00 2001
From: sigmaBoei <benzzbarquilla@gmail.com>
Date: Tue, 24 Feb 2026 13:27:07 +0800
Subject: [PATCH] header update

---
 frontend/src/app/components/header/Header.jsx | 78 +++++++++++--------
 .../app/components/header/styles.module.css   | 70 +++++++++++++----
 2 files changed, 98 insertions(+), 50 deletions(-)

diff --git a/frontend/src/app/components/header/Header.jsx b/frontend/src/app/components/header/Header.jsx
index 9436983..d0350c5 100644
--- a/frontend/src/app/components/header/Header.jsx
+++ b/frontend/src/app/components/header/Header.jsx
@@ -1,47 +1,59 @@
+"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.logo}></div>
-        {/* Organization and Dropdown */}
-        <div className={styles.orgName}>
-          {/* Header */}
-          <div>
+    <div className={styles.mainContainer}>
+      {/* Organization */}
+      <div className={styles.organizationContainer}>
+        <div className={styles.orgContainer}>
+          {/* Logo */}
+          <div className={styles.logo}></div>
+          <div className={styles.orgName}>
             <p>Organization</p>
-          </div>
-          {/* Dropdown */}
-          <div className={styles.dropdown}>
-            <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>
+            <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
+                    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>
+                </div>
+              </div>
             </div>
           </div>
         </div>
       </div>
-      {/* Search */}
-      <div>
-        <input type="text" name="search" id="" placeholder="Search" />
-      </div>
-    </nav>
+
+      {/* Profile */}
+      <div className={styles.profileContainer}></div>
+    </div>
   );
 };
 
diff --git a/frontend/src/app/components/header/styles.module.css b/frontend/src/app/components/header/styles.module.css
index 7c79c6d..7278e59 100644
--- a/frontend/src/app/components/header/styles.module.css
+++ b/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;
 }