From 9864202dd5ab4397b325a3a0170cc631cc8b5f5f Mon Sep 17 00:00:00 2001 From: ravi-p-k-1 <104999921+ravi-p-k-1@users.noreply.github.com> Date: Tue, 18 Feb 2025 12:04:39 -0800 Subject: [PATCH] Feature ticket 34 prototype navigation bar (#157) Navbar design done. --------- Co-authored-by: ravikth --- frontend/web-app/public/index.html | 4 ++ frontend/web-app/src/App.tsx | 1 + frontend/web-app/src/Components/NavBar.tsx | 54 ++++++++++++++----- frontend/web-app/src/Styles/custom/navBar.css | 46 ++++++++++++++++ frontend/web-app/src/Styles/global.css | 10 ++++ 5 files changed, 103 insertions(+), 12 deletions(-) create mode 100644 frontend/web-app/src/Styles/custom/navBar.css 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; +}