Merge pull request Anjaliavv51#104 from weberankit/navigation

feat: nav links focus features added used uselocation
2004shweta · Oct 27, 2023 · 5e901be · 5e901be
2 parents 12a5fbb + d8814d1
commit 5e901be
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 6 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -1,8 +1,9 @@
-import { Route, Routes } from "react-router-dom";
+import { Route, Routes} from "react-router-dom";
 import "./App.css";
 import { Home, Login, Registration } from "./pages";
 
 const App = () => {
+
   return (
     <Routes>
       <Route path="/" element={<Home />} />

diff --git a/src/components/Header-section/Header.jsx b/src/components/Header-section/Header.jsx
@@ -2,6 +2,9 @@ import '../Header-section/Header-section.css'
 import { Link } from "react-router-dom";
 import Navbar from './Navbar';
 const Header = () => {
+
+
+
     return (
         <>
             <div className="header-section mb-[80px]">

diff --git a/src/components/Header-section/Navbar.jsx b/src/components/Header-section/Navbar.jsx
@@ -1,12 +1,19 @@
 import { FiUser } from "react-icons/fi";
 import { FiX } from "react-icons/fi";
-import { Link } from "react-router-dom";
+import { Link ,useLocation } from "react-router-dom";
 import logo from "../../assets/Images/logo.png";
 import { useState, useEffect } from "react";
 
 const Navbar = () => {
   const [showMenu, setShowMenu] = useState("");
   const [doBlure, setDoBlure] = useState(false);
+  const [navLinkbgColor , setNavlinkbgColor] = useState(true)
+//find url value
+  let url =useLocation()
+//removing # from nav   
+  url=url.hash.slice(1)
+
+
 
   useEffect(() => {
     const scrollHandler = () => {
@@ -136,22 +143,22 @@ const Navbar = () => {
             <ul className="flex flex-row lg:gap-10 md:gap-6 font-medium">
               <li>
                 <a href="#home" aria-current="page" className="hover:text-xl hover:shadow-lg transition duration-300">
-                  HOME
+                {url=="home"?<h1 className="text-green">HOME</h1>:<h1>HOME</h1>}
                 </a>
               </li>
               <li>
                 <a href="#Service" aria-current="page" className="hover:text-xl hover:shadow-md transition duration-300">
-                  RENTALS
+                {url=="Service"?<h1 className="text-green">RENTALS</h1>:<h1>RENTALS</h1>}
                 </a>
               </li>
               <li>
                 <a href="#AboutUs" aria-current="page" className="hover:text-xl hover:shadow-md transition duration-300">
-                  ABOUT
+                {url=="AboutUs"?<h1 className="text-green">ABOUT</h1>:<h1>ABOUT</h1>}
                 </a>
               </li>
               <li>
                 <a href="#ContactUs" aria-current="page" className="hover:text-xl hover:shadow-md transition duration-300">
-                  CONTACT
+                {url=="ContactUs"?<h1 className="text-green">CONTACT</h1>:<h1>CONTACT</h1>}
                 </a>
               </li>
             </ul>