Feature ticket 34 prototype navigation bar (#157)

Navbar design done. --------- Co-authored-by: ravikth <[email protected]>
SE4CPS · Feb 18, 2025 · 9864202 · 9864202
1 parent 9b87543
commit 9864202
Show file tree

Hide file tree

Showing 5 changed files with 103 additions and 12 deletions.
diff --git 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`.
     -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
+
     <title>React App</title>
   </head>
   <body>

diff --git 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
@@ -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 (
-    <div>
-      <div>
-        <Link to="/">Home</Link>
-        <Link to="/about">About</Link>
-        <Link to="/faq">FAQ</Link>
-      </div>
-      <Outlet />
-    </div>
-  )
+
+	const location = useLocation();
+
+	const pageArray = useMemo(() => {
+		return [
+			{
+				name: 'Home',
+				path: '/',
+			},
+			{
+				name: 'About',
+				path: '/about',
+			},
+			{
+				name: 'FAQ',
+				path: '/faq',
+			}
+		]
+	}, [])
+
+	return (
+		<>
+			<div className='navbar'>
+				<div>
+					<img className='sproutly-logo' src={sproutlyLogo} alt='error img'/>
+					<img className='sproutly-text' src={sproutlyText} alt='error img'/>
+				</div>
+				<div className='navbar-link-container'>
+					{pageArray.map((page, index)=>{
+						return <Link key={index} className={`navbar-link${location.pathname===page.path? ' text-white': ''}`} to={page.path}>{page.name}</Link>
+					})}
+				</div>
+				<button className='navbar-login-logout-button'>Log In</button>
+			</div>
+			<Outlet />
+		</>
+	)
 };
 
 export default NavBar;
diff --git a/frontend/web-app/src/Styles/custom/navBar.css 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;
+}
diff --git 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;
+}