From 79d290bc4572070aad6effc090c8a064a90b1149 Mon Sep 17 00:00:00 2001 From: shivamshaw07 Date: Sat, 28 Oct 2023 15:29:41 +0530 Subject: [PATCH] Made NavBar responsive --- package-lock.json | 39 +++++++++++++++ package.json | 1 + src/components/NavBar/NavBar.css | 3 ++ src/components/NavBar/NavBar.jsx | 81 +++++++++++++++++++++++++------- src/index.jsx | 5 +- 5 files changed, 111 insertions(+), 18 deletions(-) create mode 100644 src/components/NavBar/NavBar.css diff --git a/package-lock.json b/package-lock.json index 798189a..ec9ab39 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,6 +12,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" }, "devDependencies": { @@ -839,6 +840,14 @@ "node": ">= 8" } }, + "node_modules/@remix-run/router": { + "version": "1.10.0", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.10.0.tgz", + "integrity": "sha512-Lm+fYpMfZoEucJ7cMxgt4dYt8jLfbpwRCzAjm9UgSLOkmlqo9gupxt6YX3DY0Fk155NT9l17d/ydi+964uS9Lw==", + "engines": { + "node": ">=14.0.0" + } + }, "node_modules/@types/babel__core": { "version": "7.20.3", "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.3.tgz", @@ -1930,6 +1939,36 @@ "react": "*" } }, + "node_modules/react-router": { + "version": "6.17.0", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.17.0.tgz", + "integrity": "sha512-YJR3OTJzi3zhqeJYADHANCGPUu9J+6fT5GLv82UWRGSxu6oJYCKVmxUcaBQuGm9udpWmPsvpme/CdHumqgsoaA==", + "dependencies": { + "@remix-run/router": "1.10.0" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "react": ">=16.8" + } + }, + "node_modules/react-router-dom": { + "version": "6.17.0", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.17.0.tgz", + "integrity": "sha512-qWHkkbXQX+6li0COUUPKAUkxjNNqPJuiBd27dVwQGDNsuFBdMbrS6UZ0CLYc4CsbdLYTckn4oB4tGDuPZpPhaQ==", + "dependencies": { + "@remix-run/router": "1.10.0", + "react-router": "6.17.0" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "react": ">=16.8", + "react-dom": ">=16.8" + } + }, "node_modules/read-cache": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", diff --git a/package.json b/package.json index 1767f57..9858e8d 100644 --- a/package.json +++ b/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": { diff --git a/src/components/NavBar/NavBar.css b/src/components/NavBar/NavBar.css new file mode 100644 index 0000000..5c0c055 --- /dev/null +++ b/src/components/NavBar/NavBar.css @@ -0,0 +1,3 @@ +.active{ + border-bottom: 2px solid rgb(107, 161, 215); +} \ No newline at end of file diff --git a/src/components/NavBar/NavBar.jsx b/src/components/NavBar/NavBar.jsx index a9da52e..53624c0 100644 --- a/src/components/NavBar/NavBar.jsx +++ b/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 ( -
-
- image -

GDSC AEC

-
-
-
    -
  • About us
  • -
  • Event
  • -
  • Our Team
  • -
  • Contact
  • +
    +
    + image +

    GDSC AEC

    +
    + +
    + {click ? ( + setClick(!click)} className="z-20 relative hover:cursor-pointer"/> + ) : ( + setClick(!click)} className="z-20 relative hover:cursor-pointer" /> + )} + {click && ( +
    +
      +
    • + About us +
    • +
    • + Event +
    • +
    • + Our team +
    • +
    • + Contact +
    • +
    +
    + )} +
    + +
    +
      +
    • + About us +
    • +
    • + Event +
    • +
    • + Our team +
    • +
    • + Contact +
    - ) -} + ); +}; -export default Navbar +export default Navbar; diff --git a/src/index.jsx b/src/index.jsx index c812139..7296479 100644 --- a/src/index.jsx +++ b/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( - + - + ); // If you want to start measuring performance in your app, pass a function