added header module

frontend/src/components/headervendor.jsx

@@ -0,0 +1,58 @@
+import React, { useState } from 'react';
+import { Link } from 'react-router-dom';
+
+export default function Header({ admin }) {
+  const [menuOpen, setMenuOpen] = useState(false);
+
+  const toggleMenu = () => {
+    setMenuOpen(!menuOpen);
+  };
+
+  return (
+    <div className="flex justify-end ">
+      <div className="max-w-screen-xlflex flex-wrap p-4 ml-auto">
+        <div className="flex md:order-2">
+          <button
+            type="button"
+            onClick={toggleMenu}
+            className="inline-flex ml-20 p-2 w-10 h-10 text-sm text-gray-500 rounded-lg  bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
+          >
+            <span className="sr-only">Open main menu</span>
+            <svg
+              className="w-5 h-5"
+              aria-hidden="true"
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 17 14" 
+            >
+              <path
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M1 1h15M1 7h15M1 13h15"
+              />
+            </svg>
+          </button>
+        </div>
+        <div
+          className={`justify-between w-full md:flex md:w-auto md:order-1 ${menuOpen ? '' : 'hidden'}`}
+          id="navbar-user"
+        >
+          <ul className="flex flex-col font-medium p-4 md:p-0 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:flex-row md:space-x-8 md:mt-0 md:border-0 md:bg-white dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700">
+            <li>
+              <Link to='/profile' className="block py-2 pl-3 pr-4 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700">Profile</Link>
+            </li>
+            <li>
+              <Link to='/events' className="block py-2 pl-3 pr-4 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700">Events</Link>
+            </li>
+            <li>
+              <Link to='/login' className="block py-2 pl-3 pr-4 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700">Login</Link>
+            </li>
+            {admin ? <li><Link to='/vendor' className="block py-2 pl-3 pr-4 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700">Admin</Link></li> : null}
+          </ul>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/config.js

@@ -1,3 +1,5 @@
-export default {
+const config =  {
     environment: 'dev',
-};
+};
+
+export default config;

frontend/src/index.js

@@ -1,6 +1,8 @@
 import React from 'react';
 import Login from './routes/login';
 import Vendor from './routes/vendor';
+import Events from './routes/events';
+import Profile from './routes/profile';
 import Root from './routes/root';
 import ReactDOM from 'react-dom/client';
 import reportWebVitals from './reportWebVitals';
@@ -38,8 +40,8 @@ const router = createBrowserRouter([
     element: <Root admin = {isadmin}/>,
     children:[ 
     {
-        path: "/vendor",
-        element: <Vendor />
+      path: "/vendor",
+      element: <Vendor />
     },
     {
       path: '/login',
@@ -53,6 +55,14 @@ const router = createBrowserRouter([
       path: '/reset_password',
       element: <ResetPassword/>
     },
+    {
+      path: '/profile',
+      element: <Profile/>
+    },
+    {
+      path: '/events',
+      element: <Events/>
+    },
     config.environment === "dev" && {
       path: '/service-example',
       element: <ServiceExample VendorService={MockVendorService}/>

frontend/src/routes/events.jsx

@@ -0,0 +1,5 @@
+export default function Events(){
+    return(
+        <div>You are on the events route</div>
+    )
+}

frontend/src/routes/profile.jsx

@@ -0,0 +1,5 @@
+export default function Profile(){
+    return(
+        <div>You are on the Profile route</div>
+    )
+}

frontend/src/routes/root.jsx

@@ -1,20 +1,23 @@
 
 import { Outlet, Link, useLoaderData } from "react-router-dom";
 import Footer from "../components/footer.jsx"
+import Header from "../components/headervendor";
 
-export default function Root({admin, res}){
-    const data = useLoaderData()
+
+export default function Root({admin}){
+    // const data = useLoaderData()
     return(
         <div className="bg-slate-200 w-screen h-screen">
-        <Link to='/vendor'>Go to vendors</Link>
+        {/* <Link to='/vendor'>Go to vendors</Link>
         <div>
-        <Link to='/login'>Login</Link>
-        {/* {data?
+        <Link to='/login'>Login</Link> 
+        {data?
          <div>Response from the backend: {data}</div>:
         <div>No response from the backend</div>
-        } */}
-        </div>
+        } 
+        </div>*/}
         <div id="content" >
+            <Header admin={admin}/>
             <Outlet/> 
             <Footer/>
         </div>