Fix: remove focus/highlight from Navbar after using browser back button

Author: krishagandhi0711

admin/src/components/Navbar.jsx

@@ -1,15 +1,20 @@
-import React from "react";
+import React, { useEffect } from "react";
 import { Button } from "./ui/button";
-import { ArrowRightFromLine, ChevronDown } from "lucide-react";
+import { ArrowRightFromLine } from "lucide-react";
 import { Link, useLocation } from "react-router-dom";
 
-
-
-
 const Navbar = () => {
   const location = useLocation();
+
+  useEffect(() => {
+    // Remove focus/highlight from any active element when location changes
+    if (document.activeElement) {
+      document.activeElement.blur();
+    }
+  }, [location]);
+
   return (
-    <div className="px-[5vw] py-2  w-full flex justify-between items-center bg-green-900 text-white text-xl gap-5   z-10 sticky top-0 left-0 h-16">
+    <div className="px-[5vw] py-2 w-full flex justify-between items-center bg-green-900 text-white text-xl gap-5 z-10 sticky top-0 left-0 h-16">
       <div className="flex gap-5">
         <Link to="/">
           <p>Home</p>
@@ -24,19 +29,14 @@ const Navbar = () => {
         <p>Contact Us</p>
       </div>
       <div className="flex gap-4">
-        {location.pathname === "/login" ||
-        location.pathname === "/userlogin" ? (
-          <></>
-        ) : (
+        {location.pathname !== "/login" && location.pathname !== "/userlogin" && (
           <Link to="/login">
             <Button className="gap-2 px-5 text-xl bg-green-500 hover:bg-white hover:text-black">
               LOGIN <ArrowRightFromLine />
             </Button>
           </Link>
         )}
-        {location.pathname === "/register" ? (
-          <></>
-        ) : (
+        {location.pathname !== "/register" && (
           <Link to="/register">
             <Button className="text-xl bg-transparent hover:bg-white hover:text-black">
               REGISTER

employee/src/components/Navbar.jsx

@@ -1,12 +1,20 @@
-import React from "react";
+import React, { useEffect } from "react";
 import { Button } from "./ui/button";
-import { ArrowRightFromLine, ChevronDown } from "lucide-react";
+import { ArrowRightFromLine } from "lucide-react";
 import { Link, useLocation } from "react-router-dom";
 
 const Navbar = () => {
   const location = useLocation();
+
+  useEffect(() => {
+    // Remove focus/highlight from any active element when location changes
+    if (document.activeElement) {
+      document.activeElement.blur();
+    }
+  }, [location]);
+
   return (
-    <div className="px-[5vw] py-2  w-full flex justify-between items-center bg-green-900 text-white text-xl gap-5   z-10 sticky top-0 left-0 h-16">
+    <div className="px-[5vw] py-2 w-full flex justify-between items-center bg-green-900 text-white text-xl gap-5 z-10 sticky top-0 left-0 h-16">
       <div className="flex gap-5">
         <Link to="/">
           <p>Home</p>
@@ -21,19 +29,14 @@ const Navbar = () => {
         <p>Contact Us</p>
       </div>
       <div className="flex gap-4">
-        {location.pathname === "/login" ||
-        location.pathname === "/userlogin" ? (
-          <></>
-        ) : (
+        {location.pathname !== "/login" && location.pathname !== "/userlogin" && (
           <Link to="/login">
             <Button className="gap-2 px-5 text-xl bg-green-500 hover:bg-white hover:text-black">
               LOGIN <ArrowRightFromLine />
             </Button>
           </Link>
         )}
-        {location.pathname === "/register" ? (
-          <></>
-        ) : (
+        {location.pathname !== "/register" && (
           <Link to="/register">
             <Button className="text-xl bg-transparent hover:bg-white hover:text-black">
               REGISTER