diff --git a/frontend/src/app/components/header/Header.jsx b/frontend/src/app/components/header/Header.jsx deleted file mode 100644 index 23c5ebd..0000000 --- a/frontend/src/app/components/header/Header.jsx +++ /dev/null @@ -1,15 +0,0 @@ -"use client"; - -import React from "react"; -import styles from "./styles.module.css"; -import HeaderDetails from "./components/HeaderDetails"; - -const Header = () => { - return ( -
- -
- ); -}; - -export default Header; diff --git a/frontend/src/app/components/header/components/HeaderDetails.jsx b/frontend/src/app/components/header/components/HeaderDetails.jsx deleted file mode 100644 index f9785dd..0000000 --- a/frontend/src/app/components/header/components/HeaderDetails.jsx +++ /dev/null @@ -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*/} -
-
- {/* Logo */} -
-
-

Organization

-
- {/* Dropdown Menu*/} - {openOrgDropdown && ( -
- {/* Organization Header and Search */} -
- {/* Header */} -
-

Organization

-
-

Create

- - - - - - - - - - - - -
-
- {/* Search */} -
-
- - - - - - - - - - - - -
-
-
- - {/* Select Options */} -
- {orgList.map((org, index) => { - return ( -
handleOrgSelect(index)} - > -
- - - -

{org.name}

-
-
- ); - })} -
-
- )} - {/* Button */} -
setOpenOrgDropdown(!openOrgDropdown)} - > -

Project Moonshot Inc.

-
- - - -
-
-
-
-
-
- - {/* Profile Section */} -
setOpenProfileDropdown(!openProfileDropdown)} - > - {/* Profile */} -
- {/* Username and Role*/} -
-

JM Grills

-

Super Admin

-
- - {/* User profile*/} -
-
- - - -
-
- - {/* Dropdown */} - {openProfileDropdown && ( -
- {/* Settings */} -
- {/* Icon */} -
- - - - -
-

Settings

-
- {/* Logout */} -
- {/* Icon */} -
- - - -
-

Logout

-
-
- )} -
- - ); -}; - -export default HeaderDetails; diff --git a/frontend/src/app/components/icons/create.jsx b/frontend/src/app/components/icons/create.jsx new file mode 100644 index 0000000..1d3d56d --- /dev/null +++ b/frontend/src/app/components/icons/create.jsx @@ -0,0 +1,44 @@ +import React from "react"; + +const create = () => { + return ( + + + + + + + + + + + + + ); +}; + +export default create; diff --git a/frontend/src/app/components/icons/ellipsis.jsx b/frontend/src/app/components/icons/ellipsis.jsx new file mode 100644 index 0000000..cef5cb7 --- /dev/null +++ b/frontend/src/app/components/icons/ellipsis.jsx @@ -0,0 +1,20 @@ +import React from "react"; + +const ellipsis = () => { + return ( + + + + ); +}; + +export default ellipsis; diff --git a/frontend/src/app/components/navbar/Navbar.jsx b/frontend/src/app/components/navbar/Navbar.jsx new file mode 100644 index 0000000..571ed8a --- /dev/null +++ b/frontend/src/app/components/navbar/Navbar.jsx @@ -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 ( +
+ + +
+ ); +}; + +export default Navbar; diff --git a/frontend/src/app/components/navbar/navleft/Header.jsx b/frontend/src/app/components/navbar/navleft/Header.jsx new file mode 100644 index 0000000..14b6aec --- /dev/null +++ b/frontend/src/app/components/navbar/navleft/Header.jsx @@ -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 */} +
+
+ {/* Burger Button */} + {/*
+ + + +
*/} + {/* Logo */} +
+
+

Organization

+
+ {/* Dropdown Menu*/} + {open && } + + {/* Toggle Button */} +
setOpen(!open)} + > +

Project Moonshot Inc.

+
+ + + +
+
+
+
+
+
+ + ); +}; + +export default Header; diff --git a/frontend/src/app/components/navbar/navleft/HeaderDropdown.jsx b/frontend/src/app/components/navbar/navleft/HeaderDropdown.jsx new file mode 100644 index 0000000..ae2c1a9 --- /dev/null +++ b/frontend/src/app/components/navbar/navleft/HeaderDropdown.jsx @@ -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 ( +
+ {/* Organization Header and Search */} +
+ {/* Header */} +
+

Organization

+
+

Create

+ +
+
+ {/* Search */} +
+
+ + + + + + + + + + + + +
+
+
+ + {/* Select Options */} +
+ {orgList.map((org, index) => { + return ( +
handleOrgSelect(index)} + > +
+ + + +

{org.name}

+
+
+ ); + })} +
+
+ ); +}; + +export default HeaderDropdown; diff --git a/frontend/src/app/components/header/components/Organization.module.css b/frontend/src/app/components/navbar/navleft/styles.module.css similarity index 98% rename from frontend/src/app/components/header/components/Organization.module.css rename to frontend/src/app/components/navbar/navleft/styles.module.css index e6ba2ef..d00d53b 100644 --- a/frontend/src/app/components/header/components/Organization.module.css +++ b/frontend/src/app/components/navbar/navleft/styles.module.css @@ -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) { +} diff --git a/frontend/src/app/components/navbar/navright/Profile.jsx b/frontend/src/app/components/navbar/navright/Profile.jsx new file mode 100644 index 0000000..697ce25 --- /dev/null +++ b/frontend/src/app/components/navbar/navright/Profile.jsx @@ -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 */} +
setOpen(!open)}> + {/* Profile */} +
+ {/* Username and Role*/} +
+

JM Grills

+

Super Admin

+
+ + {/* User profile*/} +
+
+ +
+ {/* Burger Button */} + {/*
+ + + +
*/} +
+ + {/* Dropdown */} + {open && } +
+ + ); +}; + +export default Profile; diff --git a/frontend/src/app/components/navbar/navright/ProfileDropdown.jsx b/frontend/src/app/components/navbar/navright/ProfileDropdown.jsx new file mode 100644 index 0000000..f5de146 --- /dev/null +++ b/frontend/src/app/components/navbar/navright/ProfileDropdown.jsx @@ -0,0 +1,62 @@ +import React from "react"; +import styles from "./styles.module.css"; + +const ProfileDropdown = () => { + return ( +
+ {/* Settings */} +
+ {/* Icon */} +
+ + + + +
+

Settings

+
+ {/* Logout */} +
+ {/* Icon */} +
+ + + +
+

Logout

+
+
+ ); +}; + +export default ProfileDropdown; diff --git a/frontend/src/app/components/header/components/Profile.module.css b/frontend/src/app/components/navbar/navright/styles.module.css similarity index 97% rename from frontend/src/app/components/header/components/Profile.module.css rename to frontend/src/app/components/navbar/navright/styles.module.css index 0d845ee..37682a2 100644 --- a/frontend/src/app/components/header/components/Profile.module.css +++ b/frontend/src/app/components/navbar/navright/styles.module.css @@ -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) { +} diff --git a/frontend/src/app/components/header/styles.module.css b/frontend/src/app/components/navbar/styles.module.css similarity index 85% rename from frontend/src/app/components/header/styles.module.css rename to frontend/src/app/components/navbar/styles.module.css index 43f803c..1ed90bf 100644 --- a/frontend/src/app/components/header/styles.module.css +++ b/frontend/src/app/components/navbar/styles.module.css @@ -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) { +} diff --git a/frontend/src/app/home/styles.module.css b/frontend/src/app/home/styles.module.css index 4e3fe60..baded54 100644 --- a/frontend/src/app/home/styles.module.css +++ b/frontend/src/app/home/styles.module.css @@ -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) { +} diff --git a/frontend/src/app/layout.js b/frontend/src/app/layout.js index 55e5e89..48f3244 100644 --- a/frontend/src/app/layout.js +++ b/frontend/src/app/layout.js @@ -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 }) {
-
+ {children}