Added nav bar

Frontend/package-lock.json

@@ -9,7 +9,8 @@
       "version": "0.0.0",
       "dependencies": {
         "react": "^18.3.1",
-        "react-dom": "^18.3.1"
+        "react-dom": "^18.3.1",
+        "react-icons": "^5.4.0"
       },
       "devDependencies": {
         "@eslint/js": "^9.17.0",
@@ -4531,6 +4532,15 @@
         "react": "^18.3.1"
       }
     },
+    "node_modules/react-icons": {
+      "version": "5.4.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.4.0.tgz",
+      "integrity": "sha512-7eltJxgVt7X64oHh6wSWNwwbKTCtMfK35hcjvJS0yxEAhPM8oUKdS3+kqaW1vicIltw+kR2unHaa12S9pPALoQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",

Frontend/package.json

@@ -11,7 +11,8 @@
   },
   "dependencies": {
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "react-icons": "^5.4.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.17.0",

Frontend/src/App.jsx

@@ -1,15 +1,9 @@
-import { useState } from 'react'
+import NavBar from "./components/navBar";
-import reactLogo from './assets/react.svg'
-import viteLogo from '/vite.svg'
-import './App.css'
-
 function App() {
-  const [count, setCount] = useState(0)
-
   return (
-    <h1 className="text-3xl font-bold underline">
+    <>
-      Hello world!
+      <NavBar />
-    </h1>
+    </>
   )
 }
 

Frontend/src/components/NavBar.jsx

@@ -0,0 +1,42 @@
+// src/Navbar.js
+import { useState } from 'react';
+import { FaBars, FaTimes } from 'react-icons/fa';
+
+const Navbar = () => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const toggleMenu = () => {
+    setIsOpen(!isOpen);
+  };
+
+  return (
+    <nav className="bg-gray-800 p-4">
+      <div className="container mx-auto flex justify-between items-center">
+        <div className="text-white text-lg font-bold">
+          MyApp
+        </div>
+        <div className="md:hidden">
+          <button onClick={toggleMenu} className="text-gray-300 hover:bg-gray-700 hover:text-white p-2 rounded">
+            {isOpen ? <FaTimes /> : <FaBars />}
+          </button>
+        </div>
+        <div className={`flex-col md:flex md:flex-row md:space-x-4 ${isOpen ? 'block' : 'hidden'} md:block`}>
+          <a href="#" className="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded">
+            Home
+          </a>
+          <a href="#" className="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded">
+            About
+          </a>
+          <a href="#" className="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded">
+            Services
+          </a>
+          <a href="#" className="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded">
+            Contact
+          </a>
+        </div>
+      </div>
+    </nav>
+  );
+};
+
+export default Navbar;