Merge pull request #1984 from kleros/fix/tiny-is-active-bug-navbar

fix: tiny is active bug in navbar

Author: alcercu

web/src/layout/Header/navbar/Explore.tsx

@@ -2,7 +2,7 @@ import React, { useMemo } from "react";
 import styled, { css } from "styled-components";
 import { landscapeStyle } from "styles/landscapeStyle";
 
-import { Link, useLocation } from "react-router-dom";
+import { Link, useLocation, useSearchParams } from "react-router-dom";
 import { useAccount } from "wagmi";
 
 import { useOpenContext } from "../MobileHeader";
@@ -57,8 +57,9 @@ interface IExplore {
 
 const Explore: React.FC<IExplore> = ({ isMobileNavbar }) => {
  const location = useLocation();
+ const [searchParams] = useSearchParams();
  const { toggleIsOpen } = useOpenContext();
- const { isConnected, address } = useAccount();
+ const { isConnected } = useAccount();
 
  const navLinks = useMemo(() => {
  const base = [
@@ -68,24 +69,31 @@ const Explore: React.FC<IExplore> = ({ isMobileNavbar }) => {
  { to: "/jurors/1/desc/all", text: "Jurors" },
  { to: "/get-pnk", text: "Get PNK" },
  ];
- if (isConnected && address) {
- base.push({ to: `/profile/1/desc/all?address=${address}`, text: "My Profile" });
+ if (isConnected) {
+ base.push({ to: "/profile/1/desc/all", text: "My Profile" });
  }
  return base;
- }, [isConnected, address]);
+ }, [isConnected]);
+
+ const currentSeg = useMemo(() => location.pathname.split("/")[1] || "", [location.pathname]);
+ const ownsProfile = !searchParams.get("address");
+
+ const getIsActive = (to: string) => {
+ const path = to.split("?")[0];
+ if (path === "/") return location.pathname === "/";
+ const targetSeg = path.split("/")[1] || "";
+ if (targetSeg !== currentSeg) return false;
+ return targetSeg !== "profile" || ownsProfile;
+ };
 
  return (
  <Container>
  <Title>Explore</Title>
- {navLinks.map(({ to, text }) => {
- const pathBase = to.split("?")[0];
- const isActive = pathBase === "/" ? location.pathname === "/" : location.pathname.startsWith(pathBase);
- return (
- <StyledLink key={text} onClick={toggleIsOpen} isActive={isActive} {...{ to, isMobileNavbar }}>
- {text}
- </StyledLink>
- );
- })}
+ {navLinks.map(({ to, text }) => (
+ <StyledLink key={text} onClick={toggleIsOpen} isActive={getIsActive(to)} {...{ to, isMobileNavbar }}>
+ {text}
+ </StyledLink>
+ ))}
  </Container>
  );
 };