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

done navbar layout

Browse Source
This commit is contained in:
sigmaBoei
2026-02-25 09:22:47 +08:00
parent 892ea45f38
commit 03bb2c22aa
6 changed files with 531 additions and 501 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2,218 +2,12 @@
import React from "react";
import styles from "./styles.module.css";
import { useState } from "react";
import HeaderDetails from "./components/HeaderDetails";
const Header = () => {
const orgList = [
{ name: "Project Moonshot Inc." },
{ name: "Organization X" },
{ name: "Organization Y" },
{ name: "Organization Z" },
];
const [open, setOpen] = useState(false);
const [selectedOrg, setSelectedOrg] = useState(null);
const handleOrgSelect = (index) => {
setSelectedOrg(index);
};
return (
<div className={styles.mainContainer}>
{/* Organization and Dropdown Section*/}
<div className={styles.organizationContainer}>
<div className={styles.orgContainer}>
{/* Logo */}
<div className={styles.orgLogo}></div>
<div className={styles.orgName}>
<p>Organization</p>
<div className={styles.dropdownContainer}>
{/* Dropdown Menu*/}
{open && (
<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>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
>
<g clipPath="url(#clip0_548_2226)">
<path
d="M8.00034 14.8718C11.7954 14.8718 14.8718 11.7954 14.8718 8.00034C14.8718 4.20535 11.7954 1.12891 8.00034 1.12891C4.20535 1.12891 1.12891 4.20535 1.12891 8.00034C1.12891 11.7954 4.20535 14.8718 8.00034 14.8718Z"
stroke="#8287FF"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M8 4.8291V11.172"
stroke="#8287FF"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M4.82812 8H11.171"
stroke="#8287FF"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</g>
<defs>
<clipPath id="clip0_548_2226">
<rect width="16" height="16" fill="white" />
</clipPath>
</defs>
</svg>
</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>
)}
{/* Button */}
<div
className={styles.dropdownBtn}
onClick={() => setOpen(!open)}
>
<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>
{/* Profile Section */}
<div className={styles.profileContainer}>
{/* Profile */}
<div className={styles.profileBadge}>
{/* Username and Role*/}
<div className={styles.nameRole}>
<p className={styles.userName}>JM Grills</p>
<p className={styles.userRole}>Super Admin</p>
</div>
{/* User profile*/}
<div className={styles.userImgContainer}>
<div className={styles.userPic}></div>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
>
<path
d="M12 16C13.1046 16 14 16.8954 14 18C14 19.1046 13.1046 20 12 20C10.8954 20 10 19.1046 10 18C10 16.8954 10.8954 16 12 16ZM12 10C13.1046 10 14 10.8954 14 12C14 13.1046 14 14 12 14C10.8954 14 10 13.1046 10 12C10 10.8954 10.8954 10 12 10ZM12 4C13.1046 4 14 4.89543 14 6C14 7.10457 13.1046 8 12 8C10.8954 8 10 7.10457 10 6C10 4.89543 10.8954 4 12 4Z"
fill="#858699"
/>
</svg>
</div>
</div>
{/* Dropdown */}
<div></div>
</div>
<HeaderDetails />
</div>
);
};