Laux/Frontend-Internal-Developer-Platform
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

header update

Browse Source
This commit is contained in:
sigmaBoei
2026-02-24 13:27:07 +08:00
parent 969301e80f
commit 2ccd9f5c26
2 changed files with 98 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
frontend/src/app/components/header/Header.jsx
View File

@@ -1,47 +1,59 @@
"use client";
import React from "react"; import React from "react";
import styles from "./styles.module.css"; import styles from "./styles.module.css";
import { useState } from "react";
const Header = () => { const Header = () => {
const [open, setOpen] = useState(false);
return ( return (
// Main Container // Main Container
<nav className={styles.headerContainer}> <div className={styles.mainContainer}>
{/* Logo and Org */} {/* Organization */}
<div className={styles.logoContainer}> <div className={styles.organizationContainer}>
{/* Icon */} <div className={styles.orgContainer}>
<div className={styles.logo}></div> {/* Logo */}
{/* Organization and Dropdown */} <div className={styles.logo}></div>
<div className={styles.orgName}> <div className={styles.orgName}>
{/* Header */}
<div>
<p>Organization</p> <p>Organization</p>
</div> <div
{/* Dropdown */} className={styles.dropdownContainer}
<div className={styles.dropdown}> onClick={() => setOpen(!open)}
<p>Project Moonshot Inc.</p> >
<div> {/* Dropdown */}
<svg {open && (
xmlns="http://www.w3.org/2000/svg" <div className={styles.dropdown}>
width="12" <div>ahdas</div>
height="12" </div>
viewBox="0 0 12 12" )}
fill="none" {/* Button */}
> <div className={styles.dropdownBtn}>
<path <p>Project Moonshot Inc.</p>
d="M1.03906 3.51953L6.00031 8.48083L10.9616 3.51953" <div>
stroke="#969AF9" <svg
strokeLinecap="round" xmlns="http://www.w3.org/2000/svg"
strokeLinejoin="round" width="12"
/> height="12"
</svg> 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>
</div> </div>
</div> </div>
{/* Search */}
<div> {/* Profile */}
<input type="text" name="search" id="" placeholder="Search" /> <div className={styles.profileContainer}></div>
</div> </div>
</nav>
); );
}; };

70
frontend/src/app/components/header/styles.module.css
View File

@@ -1,5 +1,4 @@
.headerContainer { .mainContainer {
background-color: #ff0000;
display: flex; display: flex;
height: 84px; height: 84px;
padding: 12px 24px; padding: 12px 24px;
@@ -9,8 +8,11 @@
border-bottom: 1px solid #2c2d3d; border-bottom: 1px solid #2c2d3d;
border-bottom: 1px solid color(display-p3 0.1725 0.1765 0.2353); border-bottom: 1px solid color(display-p3 0.1725 0.1765 0.2353);
} }
.logoContainer { .organizationContainer {
background-color: orange; display: flex;
align-items: center;
}
.orgContainer {
display: flex; display: flex;
padding: 6px; padding: 6px;
align-items: center; align-items: center;
@@ -36,7 +38,7 @@
align-items: flex-start; align-items: flex-start;
gap: 4px; gap: 4px;
} }
.orgName p { .orgName > p {
color: #eeeffd; color: #eeeffd;
color: color(display-p3 0.9333 0.9373 0.9882); color: color(display-p3 0.9333 0.9373 0.9882);
font-family: Inter; font-family: Inter;
@@ -46,13 +48,18 @@
line-height: normal; line-height: normal;
} }
.dropdown { .dropdownContainer {
width: 201px;
height: 28px;
cursor: pointer;
position: relative;
}
.dropdownBtn {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 16px; gap: 16px;
} }
.dropdownBtn > p {
.dropdown > p {
color: #85869b; color: #85869b;
color: color(display-p3 0.5216 0.5255 0.6); color: color(display-p3 0.5216 0.5255 0.6);
font-family: Inter; font-family: Inter;
@@ -61,19 +68,48 @@
font-weight: 500; font-weight: 500;
line-height: normal; line-height: normal;
} }
.dropdownBtn > div {
.dropdown > div {
display: flex; display: flex;
padding: 8px; padding: 8px;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
gap: 10px; gap: 10px;
border-radius: 100px;
} }
.dropdownBtn > div:hover {
.dropdown > div > button > svg { border-radius: 100px;
width: 9.922px; border: 1px solid #b8badc;
height: 4.961px; border: 1px solid color(display-p3 0.7238 0.7303 0.8531);
stroke: #959aff; background: linear-gradient(
stroke-width: 1px; 180deg,
stroke: color(display-p3 0.5892 0.6031 0.9766); 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;
} }