diff --git a/frontend/web-app/public/index.html b/frontend/web-app/public/index.html index aa069f2..40f9469 100644 --- a/frontend/web-app/public/index.html +++ b/frontend/web-app/public/index.html @@ -24,6 +24,10 @@ work correctly both with client-side routing and a non-root public URL. Learn how to configure a non-root public URL by running `npm run build`. --> + + + + React App diff --git a/frontend/web-app/src/App.tsx b/frontend/web-app/src/App.tsx index 40a1860..5a1f320 100644 --- a/frontend/web-app/src/App.tsx +++ b/frontend/web-app/src/App.tsx @@ -1,5 +1,6 @@ import React from 'react'; import RouterProvider from './Components/Router'; +import './Styles/global.css' function App() { return ( diff --git a/frontend/web-app/src/Components/NavBar.tsx b/frontend/web-app/src/Components/NavBar.tsx index 5289f58..f9ab28f 100644 --- a/frontend/web-app/src/Components/NavBar.tsx +++ b/frontend/web-app/src/Components/NavBar.tsx @@ -1,17 +1,47 @@ -import React from 'react' -import { Link, Outlet } from 'react-router-dom'; +import React, { useMemo } from 'react' +import { Link, Outlet, useLocation } from 'react-router-dom'; +import '../Styles/custom/navBar.css' +import sproutlyLogo from '../Images/sproutly-logo.svg'; +import sproutlyText from '../Images/sproutly-text.svg'; function NavBar() { - return ( -
-
- Home - About - FAQ -
- -
- ) + + const location = useLocation(); + + const pageArray = useMemo(() => { + return [ + { + name: 'Home', + path: '/', + }, + { + name: 'About', + path: '/about', + }, + { + name: 'FAQ', + path: '/faq', + } + ] + }, []) + + return ( + <> +
+
+ error img + error img +
+
+ {pageArray.map((page, index)=>{ + return {page.name} + })} +
+ +
+ + + ) }; export default NavBar; \ No newline at end of file diff --git a/frontend/web-app/src/Styles/custom/navBar.css b/frontend/web-app/src/Styles/custom/navBar.css new file mode 100644 index 0000000..d771967 --- /dev/null +++ b/frontend/web-app/src/Styles/custom/navBar.css @@ -0,0 +1,46 @@ +/* NavBar CSS */ + +.navbar { + display: flex; + flex-direction: row; + justify-content: space-between; + height: 72px; + align-items: center; + padding-left: 50px; + padding-right: 50px; + background-color: #AFD582; +} + +.navbar > *{ + font-family: "Poppins", serif; + font-weight: 1000; + text-decoration: none; + color: #4C5740; +} + +.navbar-link-container{ + width: 30%; + display: flex; + flex-direction: row; + justify-content: space-between; +} + +.navbar-link{ + text-decoration: none; + color: #4C5740; +} + +.navbar-login-logout-button{ + height: 41.5px; + background-color: #E6F2D7; + display: flex; + line-height: 41.5px; + padding-left: 26px; + padding-right: 26px; + border-radius: 15px; + border-color: #E6F2D7; +} + +.sproutly-text{ + padding-left: 11px; +} \ No newline at end of file diff --git a/frontend/web-app/src/Styles/global.css b/frontend/web-app/src/Styles/global.css index 538abe8..95475e1 100644 --- a/frontend/web-app/src/Styles/global.css +++ b/frontend/web-app/src/Styles/global.css @@ -1 +1,11 @@ /* Global CSS */ + +html, body, #root, .App { + height: 100%; + width: 100%; + margin: 0px; +} + +.text-white{ + color: #FFFFFF; +}