import React from "react";
import { useLocation, useNavigate } from "react-router-dom";

const Header = () => {
  const location = useLocation();

  function pathroutematch(route) {
    if (route === location.pathname) {
      return true;
    }
  }

  const navigate = useNavigate();

  return (
    <div className="bg-white border-b shadow-sm sticky top-0 z-50">
      <header className="flex justify-between items-center px-3 max-w-6xl mx-auto">
        <div>
          <img
            src="https://static.rdc.moveaws.com/images/logos/rdc-logo-default.svg"
            alt="logo"
            className="h-5 cursor-pointer"
            onClick={() => navigate("/")}
          ></img>
        </div>
        <div>
          <ul className="flex space-x-10">
            <li
              className={`cursor-pointer py-3 text-sm font-semibold text-gray-400 border-b-[3px] border-b-transparent  ${
                pathroutematch("/") && "text-[#000] border-b-red-300"
              }`}
              onClick={() => navigate("/")}
            >
              Home
            </li>
            <li
              className={`cursor-pointer py-3 text-sm font-semibold text-gray-400 border-b-[3px] border-b-transparent ${
                pathroutematch("/Offers") && "text-[#000] border-b-red-300"
              }`}
              onClick={() => navigate("/Offers")}
            >
              Offers
            </li>
            <li
              className={`cursor-pointer py-3 text-sm font-semibold text-gray-400 border-b-[3px] border-b-transparent ${
                pathroutematch("/sign-In") && "text-[#000] border-b-red-300"
              }`}
              onClick={() => navigate("/sign-In")}
            >
              Signin
            </li>
          </ul>
        </div>
      </header>
    </div>
  );
};

export default Header;

this code uses tailwind react and react router

the code was working smoothly 13 hrs before
I was expecting a small bottom border on the tab which is opened but it is not working the main working idea is that it should show a border bottom on whom-so-ever page is open now while making it it worked perfectly the next morning it is not working now, the routes are working perfectly but the styling part is not working here please help me here