Modifies Navbar to add links

React/package.json

@@ -15,7 +15,7 @@
     "tailwindcss": "^2.0.2"
   },
   "scripts": {
-    "start": "set HTTPS=true; set SSL_CRT_FILE=cert.pem; set SSL_KEY_FILE=key.pem; react-scripts start",
+    "start": "set HTTPS=true set SSL_CRT_FILE=cert.pem set SSL_KEY_FILE=key.pem && react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"

React/src/App.js

@@ -1,21 +1,21 @@
 import React, { useEffect } from 'react';
-import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
-import SigninOidc from './pages/signin-oidc'
-import SignoutOidc from './pages/signout-oidc'
-import Home from './pages/home'
-import Login from './pages/login'
+import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
+import SigninOidc from './pages/signin-oidc';
+import SignoutOidc from './pages/signout-oidc';
+import Home from './pages/home';
+import Login from './pages/login';
 import { Provider } from 'react-redux';
 import store from './store';
-import userManager, { loadUserFromStorage } from './services/userService'
-import AuthProvider from './utils/authProvider'
-import PrivateRoute from './utils/protectedRoute'
+import userManager, { loadUserFromStorage } from './services/userService';
+import AuthProvider from './utils/authProvider';
+import PrivateRoute from './utils/protectedRoute';
+import './index.css';
 
 function App() {
-
   useEffect(() => {
     // fetch current user from cookies
-    loadUserFromStorage(store)
-  }, [])
+    loadUserFromStorage(store);
+  }, []);
 
   return (
     <Provider store={store}>

React/src/index.css

@@ -0,0 +1,17 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Playfair+Display&display=swap');
+
+.bg-blue-custom {
+  background-color: #2170b9;
+}
+
+.font-inter {
+  font-family: 'Inter', sans-serif;
+}
+
+.font-playfair {
+  font-family: 'Playfair Display', serif;
+}
+
+/* .text-blue-custom {
+  color: #2170b9;
+} */

React/src/pages/components/Navbar.jsx

@@ -1,11 +1,42 @@
-import React from 'react'
-import logo from '../../images/logo.png'
+import React from 'react';
+import logo from '../../images/logo.svg';
+import { Link } from 'react-router-dom';
+import { useSelector } from 'react-redux';
 
-const Navbar = ()=>(
-    <div className="w-100 bg-blue-400 flex justify-center items-center" style={{height: "90px"}}>
-        <div className="flex items-center w-4/5">
-            <img src={logo} alt="logo" className="h-28"/>
+const Navbar = () => {
+  const user = useSelector((state) => state.auth.user);
+
+  return (
+    <div
+      className="w-100 bg-blue-custom flex justify-center items-center"
+      style={{ height: '90px' }}
+    >
+      <nav className="flex items-center justify-between w-4/5">
+        <img src={logo} alt="logo" className="h-28" />
+        {user ? (
+          <ul className="list-none flex items-center justify-between w-1/5 m-0">
+            <li className="m-0">
+              <Link
+                to="/vehicles"
+                className="text-white font-inter text-xl font-semibold hover:text-white"
+              >
+                Your Vehicles
+              </Link>
+            </li>
+            <li className="m-0">
+              <Link
+                to="/register"
+                className="text-white font-inter text-xl font-semibold hover:text-white"
+              >
+                Register A Vehicles
+              </Link>
+            </li>
+          </ul>
+        ) : (
+          ''
+        )}
+      </nav>
     </div>
-    </div>
-)
-export default Navbar
+  );
+};
+export default Navbar;