From 65be22affc1c165570fc6f60f2cac49d06ce194e Mon Sep 17 00:00:00 2001
From: Aarjaw adhikari <125816646+Aarjaw@users.noreply.github.com>
Date: Sat, 11 Jan 2025 13:21:15 +0545
Subject: [PATCH] Added nav bar

---
 Frontend/package-lock.json         | 12 ++++++++-
 Frontend/package.json              |  3 ++-
 Frontend/src/App.jsx               | 14 +++-------
 Frontend/src/components/NavBar.jsx | 42 ++++++++++++++++++++++++++++++
 4 files changed, 59 insertions(+), 12 deletions(-)
 create mode 100644 Frontend/src/components/NavBar.jsx

diff --git a/Frontend/package-lock.json b/Frontend/package-lock.json
index aa262c3..3d2b98b 100644
--- a/Frontend/package-lock.json
+++ b/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",
diff --git a/Frontend/package.json b/Frontend/package.json
index e44c527..98d0482 100644
--- a/Frontend/package.json
+++ b/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",
diff --git a/Frontend/src/App.jsx b/Frontend/src/App.jsx
index 590cf93..59b1583 100644
--- a/Frontend/src/App.jsx
+++ b/Frontend/src/App.jsx
@@ -1,15 +1,9 @@
-import { useState } from 'react'
-import reactLogo from './assets/react.svg'
-import viteLogo from '/vite.svg'
-import './App.css'
-
+import NavBar from "./components/navBar";
 function App() {
-  const [count, setCount] = useState(0)
-
   return (
-    <h1 className="text-3xl font-bold underline">
-      Hello world!
-    </h1>
+    <>
+      <NavBar />
+    </>
   )
 }
 
diff --git a/Frontend/src/components/NavBar.jsx b/Frontend/src/components/NavBar.jsx
new file mode 100644
index 0000000..06b889b
--- /dev/null
+++ b/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;
\ No newline at end of file