changed navbar
This commit is contained in:
67
frontend/src/app/components/navbar/navleft/Header.jsx
Normal file
67
frontend/src/app/components/navbar/navleft/Header.jsx
Normal file
@@ -0,0 +1,67 @@
|
||||
import React, { useState } from "react";
|
||||
import HeaderDropdown from "./HeaderDropdown";
|
||||
import styles from "./styles.module.css";
|
||||
|
||||
const Header = () => {
|
||||
const [open, setOpen] = useState(false);
|
||||
return (
|
||||
<>
|
||||
{/* Organization Header */}
|
||||
<div className={styles.organizationContainer}>
|
||||
<div className={styles.orgContainer}>
|
||||
{/* Burger Button */}
|
||||
{/* <div className={styles.burgerBtn}>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width={24}
|
||||
height={24}
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
>
|
||||
<path
|
||||
d="M3 4H21V6H3V4ZM3 11H15V13H3V11ZM3 18H21V20H3V18Z"
|
||||
fill="white"
|
||||
style={{ fillOpacity: 1 }}
|
||||
/>
|
||||
</svg>
|
||||
</div> */}
|
||||
{/* Logo */}
|
||||
<div className={styles.orgLogo}></div>
|
||||
<div className={styles.orgName}>
|
||||
<p>Organization</p>
|
||||
<div className={styles.dropdownContainer}>
|
||||
{/* Dropdown Menu*/}
|
||||
{open && <HeaderDropdown />}
|
||||
|
||||
{/* Toggle 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>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Header;
|
||||
112
frontend/src/app/components/navbar/navleft/HeaderDropdown.jsx
Normal file
112
frontend/src/app/components/navbar/navleft/HeaderDropdown.jsx
Normal file
@@ -0,0 +1,112 @@
|
||||
import React, { useState } from "react";
|
||||
import CreateIcon from "../../icons/create";
|
||||
import styles from "./styles.module.css";
|
||||
|
||||
const HeaderDropdown = () => {
|
||||
const orgList = [
|
||||
{ name: "Project Moonshot Inc." },
|
||||
{ name: "Organization X" },
|
||||
{ name: "Organization Y" },
|
||||
{ name: "Organization Z" },
|
||||
];
|
||||
|
||||
const [selectedOrg, setSelectedOrg] = useState(null);
|
||||
|
||||
const handleOrgSelect = (index) => {
|
||||
setSelectedOrg(index);
|
||||
};
|
||||
|
||||
return (
|
||||
<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>
|
||||
<CreateIcon />
|
||||
</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>
|
||||
);
|
||||
};
|
||||
|
||||
export default HeaderDropdown;
|
||||
259
frontend/src/app/components/navbar/navleft/styles.module.css
Normal file
259
frontend/src/app/components/navbar/navleft/styles.module.css
Normal file
@@ -0,0 +1,259 @@
|
||||
/* Organization Header and Dropdown*/
|
||||
.organizationContainer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.orgContainer {
|
||||
display: flex;
|
||||
padding: 6px;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.burgerBtn {
|
||||
display: none;
|
||||
}
|
||||
.orgLogo {
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
aspect-ratio: 1/1;
|
||||
border-radius: 100px;
|
||||
background:
|
||||
url(/images/logo.png) lightgray 50% / cover no-repeat,
|
||||
#232537;
|
||||
background:
|
||||
url(/images/logo.png) lightgray 50% / cover no-repeat,
|
||||
color(display-p3 0.1392 0.1443 0.2106);
|
||||
}
|
||||
|
||||
.orgName {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 4px;
|
||||
}
|
||||
.orgName > p {
|
||||
color: #eeeffd;
|
||||
color: color(display-p3 0.9333 0.9373 0.9882);
|
||||
font-family: Inter;
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
.dropdownContainer {
|
||||
/* width: 201px;
|
||||
height: 28px; */
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.dropdownBtn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
.dropdownBtn > p {
|
||||
color: #85869b;
|
||||
color: color(display-p3 0.5216 0.5255 0.6);
|
||||
font-family: Inter;
|
||||
font-size: 15px;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
line-height: normal;
|
||||
}
|
||||
.dropdownBtn > div {
|
||||
display: inline-flex;
|
||||
padding: 8px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
border-radius: 100px;
|
||||
border: 1px solid #b8badc00;
|
||||
}
|
||||
.dropdownBtn > div:hover {
|
||||
border: 1px solid #b8badc;
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(149, 154, 255, 0.25) 0%,
|
||||
rgba(88, 91, 151, 0.25) 100%
|
||||
);
|
||||
}
|
||||
.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;
|
||||
z-index: 1;
|
||||
top: 100%;
|
||||
margin-top: 8px;
|
||||
left: 0;
|
||||
animation-name: dropDownAnimation;
|
||||
animation-duration: 200ms;
|
||||
}
|
||||
@keyframes dropDownAnimation {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(-10%);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.orgSearchContainer {
|
||||
display: flex;
|
||||
width: 318px;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.createBtnContainer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
align-self: stretch;
|
||||
}
|
||||
.createBtnContainer > p {
|
||||
color: #a3a7c6;
|
||||
color: color(display-p3 0.6425 0.6544 0.7649);
|
||||
font-family: Inter;
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
line-height: normal;
|
||||
}
|
||||
.createBtn {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
.createBtn > p {
|
||||
color: #8187ff;
|
||||
color: color(display-p3 0.5098 0.5294 1);
|
||||
font-family: Inter;
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
.createBtn:hover > p {
|
||||
color: #9ba0ff;
|
||||
color: color(display-p3 0.6127 0.6282 1);
|
||||
font-family: Inter;
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
line-height: normal;
|
||||
text-decoration-line: underline;
|
||||
text-decoration-style: dotted;
|
||||
text-decoration-skip-ink: auto;
|
||||
text-decoration-thickness: auto;
|
||||
text-underline-offset: auto;
|
||||
text-underline-position: from-font;
|
||||
}
|
||||
.createBtn:hover > svg path {
|
||||
stroke: #9ba0ff;
|
||||
stroke-width: 1.5px;
|
||||
stroke: color(display-p3 0.6127 0.6282 1);
|
||||
}
|
||||
|
||||
.srchInputContainer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
align-self: stretch;
|
||||
}
|
||||
.srchInputGroup {
|
||||
display: flex;
|
||||
padding: 8px 12px;
|
||||
align-items: center;
|
||||
gap: 9px;
|
||||
flex: 1 0 0;
|
||||
border-radius: 4px;
|
||||
background: #282c3c;
|
||||
background: color(display-p3 0.1593 0.1702 0.2316);
|
||||
}
|
||||
|
||||
.placeholderTxt {
|
||||
flex: 1;
|
||||
background: transparent;
|
||||
border: none;
|
||||
outline: none;
|
||||
font-family: Inter;
|
||||
font-size: 16px;
|
||||
}
|
||||
.placeholderTxt::placeholder {
|
||||
color: #85869b;
|
||||
color: color(display-p3 0.5216 0.5255 0.6);
|
||||
font-family: Inter;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
letter-spacing: 0.08px;
|
||||
}
|
||||
|
||||
.optionsContainer {
|
||||
display: flex;
|
||||
width: 318px;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.orgList:hover {
|
||||
border-radius: 4px;
|
||||
background: #3c4159;
|
||||
color: #acb0ff;
|
||||
background: color(display-p3 0.2398 0.2548 0.3399);
|
||||
}
|
||||
|
||||
.orgList {
|
||||
display: flex;
|
||||
padding: 6px;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
align-self: stretch;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.orgList:hover .iconTxt p {
|
||||
color: #acb0ff;
|
||||
}
|
||||
.iconTxt {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.iconTxt > svg {
|
||||
opacity: 0;
|
||||
}
|
||||
.active > svg {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.iconTxt > p {
|
||||
color: #d2d3e1;
|
||||
color: color(display-p3 0.8235 0.8275 0.8784);
|
||||
font-family: Inter;
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
/* Mobile */
|
||||
@media (max-width: 768px) {
|
||||
}
|
||||
Reference in New Issue
Block a user