71 lines
2.2 KiB
JavaScript
71 lines
2.2 KiB
JavaScript
import React, { useState } from "react";
|
|
import HeaderDropdown from "./HeaderDropdown";
|
|
import styles from "./styles.module.css";
|
|
import ArrowDownIcon from "../../icons/arrowDown";
|
|
import useIsMobile from "@/app/hooks/useIsMobile";
|
|
|
|
const Header = () => {
|
|
const [open, setOpen] = useState(false);
|
|
const [selectedOrg, setSelectedOrg] = useState(0);
|
|
const sampleData = [
|
|
{ name: "Project Moonshot Inc." },
|
|
{ name: "Organization X" },
|
|
{ name: "Organization Y" },
|
|
{ name: "Organization Z" },
|
|
];
|
|
|
|
const isMobile = useIsMobile();
|
|
return (
|
|
<>
|
|
{/* Organization Header */}
|
|
<div className={styles.organizationContainer}>
|
|
<div
|
|
className={styles.orgContainer}
|
|
onClick={isMobile ? () => setOpen(!open) : null} //toggler entire header
|
|
>
|
|
{/* Logo */}
|
|
<div className={styles.orgLogo}></div>
|
|
<div className={styles.orgName}>
|
|
<p
|
|
className={`${styles.orgNameText} ${isMobile && open ? styles.orgNameActive : ""}`}
|
|
>
|
|
Organization
|
|
</p>
|
|
<div className={styles.dropdownContainer}>
|
|
{/* Dropdown Menu*/}
|
|
{open && (
|
|
<HeaderDropdown
|
|
setOpen={setOpen}
|
|
sampleData={sampleData}
|
|
selectedOrg={selectedOrg}
|
|
setSelectedOrg={setSelectedOrg}
|
|
/>
|
|
)}
|
|
{/* Toggle Button */}
|
|
<div
|
|
className={styles.dropdownBtn}
|
|
onClick={() => {
|
|
if (!isMobile) setOpen(!open); //toggle only org
|
|
}}
|
|
>
|
|
<p
|
|
className={`${styles.projectName} ${isMobile && open ? styles.projectNameActive : ""}`}
|
|
>
|
|
{sampleData[selectedOrg].name}
|
|
</p>
|
|
<div
|
|
className={`${styles.arrowIcon} ${isMobile && open ? styles.arrowRotate : ""}`}
|
|
>
|
|
<ArrowDownIcon width={12} height={12} color="#969AF9" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default Header;
|