changed navbar
This commit is contained in:
@@ -1,15 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import React from "react";
|
||||
import styles from "./styles.module.css";
|
||||
import HeaderDetails from "./components/HeaderDetails";
|
||||
|
||||
const Header = () => {
|
||||
return (
|
||||
<div className={styles.mainContainer}>
|
||||
<HeaderDetails />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Header;
|
||||
@@ -1,281 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import React from "react";
|
||||
import orgStyle from "./Organization.module.css";
|
||||
import profileStyle from "./Profile.module.css";
|
||||
|
||||
import { useState } from "react";
|
||||
|
||||
const HeaderDetails = () => {
|
||||
const orgList = [
|
||||
{ name: "Project Moonshot Inc." },
|
||||
{ name: "Organization X" },
|
||||
{ name: "Organization Y" },
|
||||
{ name: "Organization Z" },
|
||||
];
|
||||
const [openOrgDropdown, setOpenOrgDropdown] = useState(false);
|
||||
const [openProfileDropdown, setOpenProfileDropdown] = useState(false);
|
||||
const [selectedOrg, setSelectedOrg] = useState(null);
|
||||
|
||||
const handleOrgSelect = (index) => {
|
||||
setSelectedOrg(index);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Organization and Dropdown Section*/}
|
||||
<div className={orgStyle.organizationContainer}>
|
||||
<div className={orgStyle.orgContainer}>
|
||||
{/* Logo */}
|
||||
<div className={orgStyle.orgLogo}></div>
|
||||
<div className={orgStyle.orgName}>
|
||||
<p>Organization</p>
|
||||
<div className={orgStyle.dropdownContainer}>
|
||||
{/* Dropdown Menu*/}
|
||||
{openOrgDropdown && (
|
||||
<div className={orgStyle.dropdown}>
|
||||
{/* Organization Header and Search */}
|
||||
<div className={orgStyle.orgSearchContainer}>
|
||||
{/* Header */}
|
||||
<div className={orgStyle.createBtnContainer}>
|
||||
<p>Organization</p>
|
||||
<div className={orgStyle.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={orgStyle.srchInputContainer}>
|
||||
<div className={orgStyle.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={orgStyle.placeholderTxt}
|
||||
type="text"
|
||||
name="search"
|
||||
id=""
|
||||
placeholder="Search"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Select Options */}
|
||||
<div className={orgStyle.optionsContainer}>
|
||||
{orgList.map((org, index) => {
|
||||
return (
|
||||
<div
|
||||
className={orgStyle.orgList}
|
||||
key={index}
|
||||
onClick={() => handleOrgSelect(index)}
|
||||
>
|
||||
<div
|
||||
className={`${orgStyle.iconTxt} ${index === selectedOrg ? orgStyle.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={orgStyle.dropdownBtn}
|
||||
onClick={() => setOpenOrgDropdown(!openOrgDropdown)}
|
||||
>
|
||||
<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={profileStyle.profileContainer}
|
||||
onClick={() => setOpenProfileDropdown(!openProfileDropdown)}
|
||||
>
|
||||
{/* Profile */}
|
||||
<div className={profileStyle.profileBadge}>
|
||||
{/* Username and Role*/}
|
||||
<div className={profileStyle.nameRole}>
|
||||
<p className={profileStyle.userName}>JM Grills</p>
|
||||
<p className={profileStyle.userRole}>Super Admin</p>
|
||||
</div>
|
||||
|
||||
{/* User profile*/}
|
||||
<div className={profileStyle.userImgContainer}>
|
||||
<div className={profileStyle.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 */}
|
||||
{openProfileDropdown && (
|
||||
<div className={profileStyle.dropdownContainer}>
|
||||
{/* Settings */}
|
||||
<div className={profileStyle.settingsBtn}>
|
||||
{/* Icon */}
|
||||
<div className={profileStyle.btn}>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width={20}
|
||||
height={20}
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
>
|
||||
<path
|
||||
d="M8.60417 3.5975C8.95917 2.13417 11.0408 2.13417 11.3958 3.5975C11.4491 3.81733 11.5535 4.02148 11.7006 4.19333C11.8477 4.36518 12.0332 4.49988 12.2422 4.58645C12.4512 4.67303 12.6776 4.70904 12.9032 4.69156C13.1287 4.67407 13.3469 4.60359 13.54 4.48583C14.8258 3.7025 16.2983 5.17417 15.515 6.46083C15.3974 6.65388 15.327 6.87195 15.3096 7.09731C15.2922 7.32267 15.3281 7.54897 15.4146 7.75782C15.5011 7.96666 15.6356 8.15215 15.8073 8.29921C15.9789 8.44627 16.1829 8.55075 16.4025 8.60417C17.8658 8.95917 17.8658 11.0408 16.4025 11.3958C16.1827 11.4491 15.9785 11.5535 15.8067 11.7006C15.6348 11.8477 15.5001 12.0332 15.4135 12.2422C15.327 12.4512 15.291 12.6776 15.3084 12.9032C15.3259 13.1287 15.3964 13.3469 15.5142 13.54C16.2975 14.8258 14.8258 16.2983 13.5392 15.515C13.3461 15.3974 13.1281 15.327 12.9027 15.3096C12.6773 15.2922 12.451 15.3281 12.2422 15.4146C12.0333 15.5011 11.8479 15.6356 11.7008 15.8073C11.5537 15.9789 11.4492 16.1829 11.3958 16.4025C11.0408 17.8658 8.95917 17.8658 8.60417 16.4025C8.5509 16.1827 8.44648 15.9785 8.29941 15.8067C8.15233 15.6348 7.96676 15.5001 7.75779 15.4135C7.54882 15.327 7.32236 15.291 7.09685 15.3084C6.87133 15.3259 6.65313 15.3964 6.46 15.5142C5.17417 16.2975 3.70167 14.8258 4.485 13.5392C4.60258 13.3461 4.67296 13.1281 4.6904 12.9027C4.70785 12.6773 4.67187 12.451 4.58539 12.2422C4.49892 12.0333 4.36438 11.8479 4.19273 11.7008C4.02107 11.5537 3.81714 11.4492 3.5975 11.3958C2.13417 11.0408 2.13417 8.95917 3.5975 8.60417C3.81733 8.5509 4.02148 8.44648 4.19333 8.29941C4.36518 8.15233 4.49988 7.96676 4.58645 7.75779C4.67303 7.54882 4.70904 7.32236 4.69156 7.09685C4.67407 6.87133 4.60359 6.65313 4.48583 6.46C3.7025 5.17417 5.17417 3.70167 6.46083 4.485C7.29417 4.99167 8.37417 4.54333 8.60417 3.5975Z"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M7.5 10C7.5 10.663 7.76339 11.2989 8.23223 11.7678C8.70107 12.2366 9.33696 12.5 10 12.5C10.663 12.5 11.2989 12.2366 11.7678 11.7678C12.2366 11.2989 12.5 10.663 12.5 10C12.5 9.33696 12.2366 8.70107 11.7678 8.23223C11.2989 7.76339 10.663 7.5 10 7.5C9.33696 7.5 8.70107 7.76339 8.23223 8.23223C7.76339 8.70107 7.5 9.33696 7.5 10Z"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<p>Settings</p>
|
||||
</div>
|
||||
{/* Logout */}
|
||||
<div className={profileStyle.logoutBtn}>
|
||||
{/* Icon */}
|
||||
<div className={profileStyle.btn}>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width={20}
|
||||
height={20}
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
>
|
||||
<path
|
||||
d="M11.5625 6.875V5.3125C11.5625 4.8981 11.3979 4.50067 11.1049 4.20765C10.8118 3.91462 10.4144 3.75 10 3.75H4.53125C4.11685 3.75 3.71942 3.91462 3.4264 4.20765C3.13337 4.50067 2.96875 4.8981 2.96875 5.3125V14.6875C2.96875 15.1019 3.13337 15.4993 3.4264 15.7924C3.71942 16.0854 4.11685 16.25 4.53125 16.25H10C10.4144 16.25 10.8118 16.0854 11.1049 15.7924C11.3979 15.4993 11.5625 15.1019 11.5625 14.6875V13.125M7.65625 10H17.0312M17.0312 10L14.6875 7.65625M17.0312 10L14.6875 12.3437"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<p>Logout</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default HeaderDetails;
|
||||
44
frontend/src/app/components/icons/create.jsx
Normal file
44
frontend/src/app/components/icons/create.jsx
Normal file
@@ -0,0 +1,44 @@
|
||||
import React from "react";
|
||||
|
||||
const create = () => {
|
||||
return (
|
||||
<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>
|
||||
);
|
||||
};
|
||||
|
||||
export default create;
|
||||
20
frontend/src/app/components/icons/ellipsis.jsx
Normal file
20
frontend/src/app/components/icons/ellipsis.jsx
Normal file
@@ -0,0 +1,20 @@
|
||||
import React from "react";
|
||||
|
||||
const ellipsis = () => {
|
||||
return (
|
||||
<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>
|
||||
);
|
||||
};
|
||||
|
||||
export default ellipsis;
|
||||
17
frontend/src/app/components/navbar/Navbar.jsx
Normal file
17
frontend/src/app/components/navbar/Navbar.jsx
Normal file
@@ -0,0 +1,17 @@
|
||||
"use client";
|
||||
|
||||
import React from "react";
|
||||
import styles from "./styles.module.css";
|
||||
import NavLeft from "./navleft/Header";
|
||||
import NavRight from "./navright/Profile";
|
||||
|
||||
const Navbar = () => {
|
||||
return (
|
||||
<div className={styles.mainContainer}>
|
||||
<NavLeft />
|
||||
<NavRight />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Navbar;
|
||||
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;
|
||||
@@ -10,6 +10,9 @@
|
||||
gap: 16px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.burgerBtn {
|
||||
display: none;
|
||||
}
|
||||
.orgLogo {
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
@@ -250,3 +253,7 @@
|
||||
font-weight: 500;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
/* Mobile */
|
||||
@media (max-width: 768px) {
|
||||
}
|
||||
50
frontend/src/app/components/navbar/navright/Profile.jsx
Normal file
50
frontend/src/app/components/navbar/navright/Profile.jsx
Normal file
@@ -0,0 +1,50 @@
|
||||
import React, { useState } from "react";
|
||||
import EllipsisIcon from "../../icons/ellipsis";
|
||||
import ProfileDropdown from "./ProfileDropdown";
|
||||
import styles from "./styles.module.css";
|
||||
const Profile = () => {
|
||||
const [open, setOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Profile Section */}
|
||||
<div className={styles.profileContainer} onClick={() => setOpen(!open)}>
|
||||
{/* 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>
|
||||
<EllipsisIcon />
|
||||
</div>
|
||||
{/* Burger Button */}
|
||||
{/* <div className={styles.ellipsisBtn}>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width={24}
|
||||
height={24}
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
>
|
||||
<path
|
||||
d="M8 12C8 13.1046 7.1046 14 6 14C4.8954 14 4 13.1046 4 12C4 10.8954 4.8954 10 6 10C7.1046 10 8 10.8954 8 12ZM14 12C14 13.1046 13.1046 14 12 14C10.8954 10 10 13.1046 10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12ZM20 12C20 13.1046 19.1046 14 18 14C16.8954 14 16 13.1046 16 12C16 10.8954 16.8954 10 18 10C19.1046 10 20 10.8954 20 12Z"
|
||||
fill="#858699"
|
||||
style={{ fillOpacity: 1 }}
|
||||
/>
|
||||
</svg>
|
||||
</div> */}
|
||||
</div>
|
||||
|
||||
{/* Dropdown */}
|
||||
{open && <ProfileDropdown />}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Profile;
|
||||
@@ -0,0 +1,62 @@
|
||||
import React from "react";
|
||||
import styles from "./styles.module.css";
|
||||
|
||||
const ProfileDropdown = () => {
|
||||
return (
|
||||
<div className={styles.dropdownContainer}>
|
||||
{/* Settings */}
|
||||
<div className={styles.settingsBtn}>
|
||||
{/* Icon */}
|
||||
<div className={styles.btn}>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width={20}
|
||||
height={20}
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
>
|
||||
<path
|
||||
d="M8.60417 3.5975C8.95917 2.13417 11.0408 2.13417 11.3958 3.5975C11.4491 3.81733 11.5535 4.02148 11.7006 4.19333C11.8477 4.36518 12.0332 4.49988 12.2422 4.58645C12.4512 4.67303 12.6776 4.70904 12.9032 4.69156C13.1287 4.67407 13.3469 4.60359 13.54 4.48583C14.8258 3.7025 16.2983 5.17417 15.515 6.46083C15.3974 6.65388 15.327 6.87195 15.3096 7.09731C15.2922 7.32267 15.3281 7.54897 15.4146 7.75782C15.5011 7.96666 15.6356 8.15215 15.8073 8.29921C15.9789 8.44627 16.1829 8.55075 16.4025 8.60417C17.8658 8.95917 17.8658 11.0408 16.4025 11.3958C16.1827 11.4491 15.9785 11.5535 15.8067 11.7006C15.6348 11.8477 15.5001 12.0332 15.4135 12.2422C15.327 12.4512 15.291 12.6776 15.3084 12.9032C15.3259 13.1287 15.3964 13.3469 15.5142 13.54C16.2975 14.8258 14.8258 16.2983 13.5392 15.515C13.3461 15.3974 13.1281 15.327 12.9027 15.3096C12.6773 15.2922 12.451 15.3281 12.2422 15.4146C12.0333 15.5011 11.8479 15.6356 11.7008 15.8073C11.5537 15.9789 11.4492 16.1829 11.3958 16.4025C11.0408 17.8658 8.95917 17.8658 8.60417 16.4025C8.5509 16.1827 8.44648 15.9785 8.29941 15.8067C8.15233 15.6348 7.96676 15.5001 7.75779 15.4135C7.54882 15.327 7.32236 15.291 7.09685 15.3084C6.87133 15.3259 6.65313 15.3964 6.46 15.5142C5.17417 16.2975 3.70167 14.8258 4.485 13.5392C4.60258 13.3461 4.67296 13.1281 4.6904 12.9027C4.70785 12.6773 4.67187 12.451 4.58539 12.2422C4.49892 12.0333 4.36438 11.8479 4.19273 11.7008C4.02107 11.5537 3.81714 11.4492 3.5975 11.3958C2.13417 11.0408 2.13417 8.95917 3.5975 8.60417C3.81733 8.5509 4.02148 8.44648 4.19333 8.29941C4.36518 8.15233 4.49988 7.96676 4.58645 7.75779C4.67303 7.54882 4.70904 7.32236 4.69156 7.09685C4.67407 6.87133 4.60359 6.65313 4.48583 6.46C3.7025 5.17417 5.17417 3.70167 6.46083 4.485C7.29417 4.99167 8.37417 4.54333 8.60417 3.5975Z"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M7.5 10C7.5 10.663 7.76339 11.2989 8.23223 11.7678C8.70107 12.2366 9.33696 12.5 10 12.5C10.663 12.5 11.2989 12.2366 11.7678 11.7678C12.2366 11.2989 12.5 10.663 12.5 10C12.5 9.33696 12.2366 8.70107 11.7678 8.23223C11.2989 7.76339 10.663 7.5 10 7.5C9.33696 7.5 8.70107 7.76339 8.23223 8.23223C7.76339 8.70107 7.5 9.33696 7.5 10Z"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<p>Settings</p>
|
||||
</div>
|
||||
{/* Logout */}
|
||||
<div className={styles.logoutBtn}>
|
||||
{/* Icon */}
|
||||
<div className={styles.btn}>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width={20}
|
||||
height={20}
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
>
|
||||
<path
|
||||
d="M11.5625 6.875V5.3125C11.5625 4.8981 11.3979 4.50067 11.1049 4.20765C10.8118 3.91462 10.4144 3.75 10 3.75H4.53125C4.11685 3.75 3.71942 3.91462 3.4264 4.20765C3.13337 4.50067 2.96875 4.8981 2.96875 5.3125V14.6875C2.96875 15.1019 3.13337 15.4993 3.4264 15.7924C3.71942 16.0854 4.11685 16.25 4.53125 16.25H10C10.4144 16.25 10.8118 16.0854 11.1049 15.7924C11.3979 15.4993 11.5625 15.1019 11.5625 14.6875V13.125M7.65625 10H17.0312M17.0312 10L14.6875 7.65625M17.0312 10L14.6875 12.3437"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<p>Logout</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ProfileDropdown;
|
||||
@@ -20,7 +20,6 @@
|
||||
background: #21232f;
|
||||
background: color(display-p3 0.1294 0.1373 0.1804);
|
||||
}
|
||||
|
||||
.nameRole {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -70,6 +69,9 @@
|
||||
border-radius: 32px;
|
||||
background: url(/profile/PROFILE.svg) lightgray 50% / cover no-repeat;
|
||||
}
|
||||
.ellipsisBtn {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.dropdownContainer {
|
||||
display: flex;
|
||||
@@ -138,3 +140,6 @@
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
}
|
||||
/* Mobile */
|
||||
@media (max-width: 768px) {
|
||||
}
|
||||
@@ -8,3 +8,7 @@
|
||||
border-bottom: 1px solid #2c2d3d;
|
||||
border-bottom: 1px solid color(display-p3 0.1725 0.1765 0.2353);
|
||||
}
|
||||
|
||||
/* Mobile */
|
||||
@media (max-width: 768px) {
|
||||
}
|
||||
@@ -29,8 +29,13 @@
|
||||
align-items: center;
|
||||
align-self: stretch;
|
||||
border-radius: 8px;
|
||||
background: #21232f;
|
||||
background: color(display-p3 0.1294 0.1373 0.1804);
|
||||
border-radius: 8px;
|
||||
background: linear-gradient(180deg, #21232f 0%, #34366f 100%);
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
color(display-p3 0.1294 0.1373 0.1804) 0%,
|
||||
color(display-p3 0.205 0.2122 0.4215) 100%
|
||||
);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
@@ -52,11 +57,11 @@
|
||||
right: 0;
|
||||
}
|
||||
.gradientGlass {
|
||||
width: 350px;
|
||||
height: 350px;
|
||||
/* aspect-ratio: 75/75; */
|
||||
width: 345.503px;
|
||||
height: 345.503px;
|
||||
transform: rotate(3.836deg) translateX(-20px);
|
||||
aspect-ratio: 1/1;
|
||||
background: url(/images/idp.png) 50% / cover no-repeat;
|
||||
transform: translate(-5px, -30px) scale(0.9) rotate(5deg);
|
||||
}
|
||||
.weather {
|
||||
display: flex;
|
||||
@@ -142,3 +147,15 @@
|
||||
letter-spacing: -0.18px;
|
||||
width: 463px;
|
||||
}
|
||||
|
||||
/* Tablet */
|
||||
@media (max-width: 1024px) {
|
||||
}
|
||||
|
||||
/* Mobile */
|
||||
@media (max-width: 768px) {
|
||||
}
|
||||
|
||||
/* Small Mobile */
|
||||
@media (max-width: 400px) {
|
||||
}
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import { Inter } from "next/font/google";
|
||||
import Sidebar from "./components/sidebar/Sidebar";
|
||||
import Header from "./components/header/Header";
|
||||
import "./globals.css";
|
||||
import styles from "./page.module.css";
|
||||
import Navbar from "./components/navbar/Navbar";
|
||||
|
||||
const inter = Inter({
|
||||
variable: "--font-inter",
|
||||
@@ -22,7 +22,7 @@ export default function RootLayout({ children }) {
|
||||
<Sidebar />
|
||||
|
||||
<div className={styles.mainContainer}>
|
||||
<Header />
|
||||
<Navbar />
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user