Made NavBar responsive

package.json

@@ -6,6 +6,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^4.11.0",
+    "react-router-dom": "^6.17.0",
     "web-vitals": "^2.1.4"
   },
   "repository": {

src/components/NavBar/NavBar.css

@@ -0,0 +1,3 @@
+.active{
+    border-bottom: 2px solid rgb(107, 161, 215);
+}

src/components/NavBar/NavBar.jsx

@@ -1,22 +1,71 @@
-import React from 'react'
-import Logo from '../../Assests/gdsc-logo.png'
+import React, { useState } from "react";
+import { FaBars, FaTimes } from "react-icons/fa";
+import Logo from "../../Assests/gdsc-logo.png";
+import { NavLink } from "react-router-dom";
+import "./NavBar.css";
 const Navbar = () => {
+  const [click, setClick] = useState(false);
+
   return (
-    <div className='w-[100%]  flex justify-center items-center py-6 relative'>
-        <div className='flex justify-center items-center absolute left-[5vw] gap-1'>
-            <img src={Logo} alt="image" className='h-[3.5rem]'/>
-            <h1 className='font-bold text-lg text-[#767676]'>GDSC AEC</h1>
-        </div>
-      <div style={{boxShadow:' 0 0 10px rgba(0, 0, 0, 0.2)'}}    className='  px-[5em] rounded-full '>
-        <ul className=' flex justify-center items-center  gap-12 drop-shadow-2xl text-sm h-[6.4vh] text-[#535353] transition-all delay-300'>
-            <li className='hover:border-b-2 hover:border-b-blue-400 hover:cursor-pointer hover:text-blue-500'>About us</li>
-            <li className='hover:border-b-2 hover:border-b-blue-400 hover:cursor-pointer hover:text-blue-500'>Event</li>
-            <li className='hover:border-b-2 hover:border-b-blue-400 hover:cursor-pointer hover:text-blue-500'>Our Team</li>
-            <li className='hover:border-b-2 hover:border-b-blue-400 hover:cursor-pointer hover:text-blue-500'>Contact</li>
+    <div className="w-[100%] h-[12vh]  flex justify-between md:justify-center  lg:justify-center items-center px-[5vw] md:px-0 lg:px-0 py-6 relative">
+      <div className="flex justify-center items-center md:absolute lg:absolute md:left-[5vw] lg:left-[5vw] gap-1">
+        <img src={Logo} alt="image" className="h-[3.5rem]" />
+        <h1 className="font-bold text-lg text-[#767676]">GDSC AEC</h1>
+      </div>
+
+      <div
+        className="p-3 rounded-full block lg:hidden md:hidden  z-40"
+        style={{ boxShadow: " 0 0 10px rgba(0, 0, 0, 0.2)" }}
+      >
+        {click ? (
+          <FaTimes onClick={() => setClick(!click)} className="z-20 relative hover:cursor-pointer"/>
+        ) : (
+          <FaBars onClick={() => setClick(!click)} className="z-20 relative hover:cursor-pointer" />
+        )}
+        {click && (
+          <div
+            className="w-[12rem] h-[20rem] bg-white absolute z-10 top-0 right-0 block lg:hidden md:hidden rounded-lg"
+            style={{ boxShadow: " 0 0 10px rgba(0, 0, 0, 0.2)" }}
+          >
+            <ul className=" flex flex-col justify-center mt-[13vh] gap-4 items-center text-md text-[#535353]">
+              <li className="hover:border-b-2 hover:border-b-blue-400 hover:cursor-pointer hover:text-blue-500">
+                <NavLink to="/">About us</NavLink>
+              </li>
+              <li className="hover:border-b-2 hover:border-b-blue-400 hover:cursor-pointer hover:text-blue-500">
+                <NavLink to="/event">Event</NavLink>
+              </li>
+              <li className="hover:border-b-2 hover:border-b-blue-400 hover:cursor-pointer hover:text-blue-500">
+                <NavLink to="/team">Our team</NavLink>
+              </li>
+              <li className="hover:border-b-2 hover:border-b-blue-400 hover:cursor-pointer hover:text-blue-500">
+                <NavLink to="/contact">Contact</NavLink>
+              </li>
+            </ul>
+          </div>
+        )}
+      </div>
+
+      <div
+        style={{ boxShadow: " 0 0 10px rgba(0, 0, 0, 0.2)" }}
+        className="  px-[5em] rounded-full hidden md:block lg:block md:ml-[20vw] lg:ml-0"
+      >
+        <ul className=" flex justify-center items-center  gap-12 text-sm h-[6.4vh] text-[#535353] transition-all delay-300">
+          <li className="hover:border-b-2 hover:border-b-blue-400 hover:cursor-pointer hover:text-blue-500">
+            <NavLink to="/">About us</NavLink>
+          </li>
+          <li className="hover:border-b-2 hover:border-b-blue-400 hover:cursor-pointer hover:text-blue-500">
+            <NavLink to="/about">Event</NavLink>
+          </li>
+          <li className="hover:border-b-2 hover:border-b-blue-400 hover:cursor-pointer hover:text-blue-500">
+            <NavLink to="/team">Our team</NavLink>
+          </li>
+          <li className="hover:border-b-2 hover:border-b-blue-400 hover:cursor-pointer hover:text-blue-500">
+            <NavLink to="/contact">Contact</NavLink>
+          </li>
         </ul>
       </div>
     </div>
-  )
-}
+  );
+};
 
-export default Navbar
+export default Navbar;

src/index.jsx

@@ -2,12 +2,13 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
+import { BrowserRouter } from 'react-router-dom';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
-  <React.StrictMode>
+  <BrowserRouter>
     <App />
-  </React.StrictMode>
+  </BrowserRouter>
 );
 
 // If you want to start measuring performance in your app, pass a function