Fixes the Navbar situation

React/src/App.js

@@ -16,7 +16,7 @@ function App() {
   useEffect(() => {
     // Commented out not to check the localStorage for the user's existence ** Temporary **
     // fetch current user from cookies
-    // loadUserFromStorage(store);
+    loadUserFromStorage(store);
   }, []);
 
   // Should be removed ** Temporary **
@@ -27,7 +27,7 @@ function App() {
   };
 
   // ** Temporary **
-  logUserIn();
+  // logUserIn();
 
   return (
     <Provider store={store}>

React/src/pages/YourVehicles.js

@@ -5,7 +5,7 @@ import VehiclesMain from "./components/VehiclesMain";
 
 const YourVehicles = () => {
   return (
-    <div className="h-screen overflow-hidden">
+    <div>
       <Navbar />
       <Main Component={VehiclesMain} />
     </div>

React/src/pages/components/LoginWindow.js

@@ -12,7 +12,7 @@ const LoginWindow = () => {
   };
 
   return (
-    <div className="xl:w-1/3 lg:w-5/12 md:w-2/4 sm:w-9/12 w-11/12 flex flex-col justify-center shadow md:px-32 sm:px-28 md:py-40 sm:py-36 px-20 py-16">
+    <div className="xl:w-1/3 lg:w-5/12 md:w-2/4 sm:w-9/12 w-11/12 flex flex-col justify-center shadow md:px-32 sm:px-28 md:py-36 sm:py-36 px-20 py-16 mt-20">
       <Heading1 text={"Traffic Police Service"} />
 
       <p className="text-black-custom font-light text-3xl mb-20">

React/src/pages/components/Main.js

@@ -4,7 +4,7 @@ const Main = ({ Component, styles = {} }) => {
   return (
     <div
       className="flex flex-col items-center justify-center h-4/5"
-      style={{ ...styles }}
+      style={{ ...styles, marginTop: "90px" }}
     >
       <Component />
     </div>

React/src/pages/components/Navbar.js

@@ -13,11 +13,13 @@ const Navbar = () => {
 
   return (
     <div
-      className="w-100 bg-blue-custom flex justify-center items-center"
+      className="w-screen bg-blue-custom flex justify-center items-center fixed top-0 left-0"
       style={{ height: "90px" }}
     >
       <nav className="flex items-center justify-between w-4/5">
+        <Link to="/">
           <img src={logo} alt="logo" className="h-28" />
+        </Link>
         {user ? (
           <ul className="list-none flex items-center justify-between w-2/6 m-0">
             <li className="m-0">

React/src/pages/components/VehiclesMain.js

@@ -45,6 +45,49 @@ const VehiclesMain = () => {
       licensePlate: "9956443",
       type: 1,
     },
+
+    {
+      id: Math.floor(Math.random() * 200) + 1,
+      color: "White",
+      model: "Toyota Camry",
+      licensePlate: "9956443",
+      type: 1,
+    },
+    {
+      id: Math.floor(Math.random() * 200) + 1,
+      color: "White",
+      model: "Toyota Camry",
+      licensePlate: "9956443",
+      type: 1,
+    },
+    {
+      id: Math.floor(Math.random() * 200) + 1,
+      color: "White",
+      model: "Toyota Camry",
+      licensePlate: "9956443",
+      type: 1,
+    },
+    {
+      id: Math.floor(Math.random() * 200) + 1,
+      color: "White",
+      model: "Toyota Camry",
+      licensePlate: "9956443",
+      type: 1,
+    },
+    {
+      id: Math.floor(Math.random() * 200) + 1,
+      color: "White",
+      model: "Toyota Camry",
+      licensePlate: "9956443",
+      type: 1,
+    },
+    {
+      id: Math.floor(Math.random() * 200) + 1,
+      color: "White",
+      model: "Toyota Camry",
+      licensePlate: "9956443",
+      type: 1,
+    },
   ]);
 
   useEffect(() => {
@@ -62,9 +105,9 @@ const VehiclesMain = () => {
     <div className="flex flex-col">
       <Heading1
         text={"Traffic Police Service"}
+        classes="mt-24"
         styles={{
           marginBottom: "0",
-          ...(!vehicleData && { marginTop: "10%" }),
         }}
       />
       {/* <p>Hello, {user.profile.given_name}.</p> */}
@@ -83,7 +126,7 @@ const VehiclesMain = () => {
       )}
       <Button
         text="Register A Vehicle"
-        classes={vehicleData && "self-start mt-20"}
+        classes={vehicleData && "self-start my-24"}
       />
     </div>
   );

React/src/pages/login.js

@@ -16,7 +16,7 @@ function Login() {
   return user ? (
     <Redirect to={"/"} />
   ) : (
-    <div className="h-screen">
+    <div>
       <Navbar />
       <Main Component={LoginWindow} />
     </div>