Refactor navigation links in NavMenu, BlockPage, MasterplanPage, and SurroundingsPage to use Link component for improved routing. Remove unnecessary target attributes and enhance accessibility by ensuring consistent link behavior.

2026-04-21 14:37:31 +05:00
parent 9b69767b5b
commit 6aecdfb63d
4 changed files with 60 additions and 59 deletions
@@ -48,7 +48,6 @@ function NavMenu() {
          Surroundings
        </MenuLink>
        <MenuLink
-          target="_blank"
          to="https://barahatown.com"
          className={({ isActive }) => clsx(!isActive && "max-md:hidden")}
        >
@@ -110,7 +109,6 @@ function NavMenu() {
            <MenuLink
              highlighted={false}
              to="https://barahatown.com"
-              target="_blank"
              className="[&>button]:w-full [&>button]:justify-start"
              onClick={handleClose}
            >
@@ -143,9 +143,7 @@ function BlockPage() {
          </div>
        </div>
        <div className="flex flex-1 justify-end">
-          <Link
-            to={searchParams.toString() ? `/?${searchParams.toString()}` : "/"}
-          >
+          <Link to="https://barahatown.com">
            <img
              src="/img/about/baraha_logo.svg"
              alt="baraha-logo"
@@ -302,7 +300,7 @@ function BlockPage() {
          <div className="2xl:size-[1.111vw] size-4">
            <VirtualDTourIcon />
          </div>
-          Show room
+          <span className="max-md:hidden">Show room</span>
        </Button>
      </Link>
      <Compass
@@ -20,7 +20,7 @@ import { isMobile } from "react-device-detect";
 import FacilityPopup from "../popups/FacilitiesPopup";
 import { facilities } from "../../consts/facilities";
 import { facilitiesPoints } from "../../consts/facilitiesPoints";
-import { useNavigate, useSearchParams } from "react-router";
+import { Link, useNavigate, useSearchParams } from "react-router";
 import LoaderIcon from "../icons/LoaderIcon";
 import useModalStore from "../../stores/useModalStore";
 import VideoModal from "../VideoModal";
@@ -167,9 +167,17 @@ function MasterplanPage() {
    return false;
  }

-  /** Индекс 0 в facilitiesPoints соответствует Hypermarket в facilities */
+  /** Только маркеры инфраструктуры (Hypermarket и т.д.) — круглые поинты блоков белые, оранжевым остаётся маркер на карте. */
+  function isFacilityOnlyFilterMode() {
+    if (!hasActiveFilters()) return false;
+    return [...selectedUnitTypes].every((t) => FACILITY_ONLY_UNIT_TYPES.has(t));
+  }
+
+  /** Индексы в facilitiesPoints: 0 — Hypermarket, 1 — Fitness Club (см. facilities) */
  function isFacilityFilterHighlight(index: number) {
-    return index === 0 && selectedUnitTypes.has("Hypermarket");
+    if (index === 0 && selectedUnitTypes.has("Hypermarket")) return true;
+    if (index === 1 && selectedUnitTypes.has("Healthcare service")) return true;
+    return false;
  }

  function handleImageLoad(index: number) {
@@ -924,41 +932,43 @@ function MasterplanPage() {
          <AnimatePresence>
            {isShowVideo &&
              (hoveredMaskIndex === null || hoveredMaskIndex > 15) &&
-              sequencePoints[currentFrame].map(({ x, y }, index) => (
-                <motion.g
-                  initial={{ opacity: 0 }}
-                  animate={{ opacity: 1 }}
-                  exit={{ opacity: 0 }}
-                  key={`${currentFrame}-${index}`}
-                  style={{
-                    scale: 1 / zoom,
-                    transformOrigin: `${
-                      x - Math.max(0.00694 * innerWidth, 10) / 2
-                    }px ${y - Math.max(0.00694 * innerWidth, 10) / 2}px`,
-                  }}
-                >
-                  <circle
-                    data-block-mask-hit=""
-                    cx={x - Math.max(0.00694 * innerWidth, 10) / 2}
-                    cy={y - Math.max(0.00694 * innerWidth, 10) / 2}
-                    r={Math.max(0.00694 * innerWidth, 10) / 2}
-                    fill={blockHasSelectedUnits(index) ? "#F3713F" : "white"}
-                    stroke={
-                      blockHasSelectedUnits(index)
-                        ? "white"
-                        : "rgba(50, 77, 67, 0.15)"
-                    }
-                    strokeWidth={2}
-                    className="cursor-pointer transition-[fill,stroke] duration-300"
-                    onMouseEnter={(e) => {
-                      if (index > 15) handleBlockMouseEnter(e, index);
+              sequencePoints[currentFrame].map(({ x, y }, index) => {
+                const blockPointOrange =
+                  blockHasSelectedUnits(index) && !isFacilityOnlyFilterMode();
+                return (
+                  <motion.g
+                    initial={{ opacity: 0 }}
+                    animate={{ opacity: 1 }}
+                    exit={{ opacity: 0 }}
+                    key={`${currentFrame}-${index}`}
+                    style={{
+                      scale: 1 / zoom,
+                      transformOrigin: `${
+                        x - Math.max(0.00694 * innerWidth, 10) / 2
+                      }px ${y - Math.max(0.00694 * innerWidth, 10) / 2}px`,
                    }}
-                    onMouseLeave={(e) => {
-                      if (index > 15) handleBlockMouseLeave(e);
-                    }}
-                  />
-                </motion.g>
-              ))}
+                  >
+                    <circle
+                      data-block-mask-hit=""
+                      cx={x - Math.max(0.00694 * innerWidth, 10) / 2}
+                      cy={y - Math.max(0.00694 * innerWidth, 10) / 2}
+                      r={Math.max(0.00694 * innerWidth, 10) / 2}
+                      fill={blockPointOrange ? "#F3713F" : "white"}
+                      stroke={
+                        blockPointOrange ? "white" : "rgba(50, 77, 67, 0.15)"
+                      }
+                      strokeWidth={2}
+                      className="cursor-pointer transition-[fill,stroke] duration-300"
+                      onMouseEnter={(e) => {
+                        if (index > 15) handleBlockMouseEnter(e, index);
+                      }}
+                      onMouseLeave={(e) => {
+                        if (index > 15) handleBlockMouseLeave(e);
+                      }}
+                    />
+                  </motion.g>
+                );
+              })}
          </AnimatePresence>

          {/* Masks */}
@@ -1093,12 +1103,7 @@ function MasterplanPage() {
          <UnitFilters showHypermarketFilter />
        </>
      )}
-      <div
-        onClick={() => {
-          window.location.href = "/";
-        }}
-        className="cursor-pointer"
-      >
+      <Link to="https://barahatown.com" className="cursor-pointer">
        <img
          src="/img/about/baraha_logo.svg"
          className="absolute 2xl:top-[1.111vw] top-4 2xl:right-[1.111vw] right-4 2xl:w-[13.681vw] md:w-[165px] select-none max-md:hidden"
@@ -1111,7 +1116,7 @@ function MasterplanPage() {
          draggable={false}
          alt="baraha-logo-mobile"
        />
-      </div>
+      </Link>
    </div>
  );
 }
@@ -15,6 +15,7 @@ import Button from "../ui/Button";
 import PlusIcon from "../icons/PlusIcon";
 import MinusIcon from "../icons/MinusIcon";
 import FullscreenButton from "../ui/FullscreenButton";
+import { Link } from "react-router";

 interface Position {
  x: number;
@@ -1302,15 +1303,14 @@ function SurroundingsPage({ maxZoom = 3 }: MapProps) {
        </Button>
      </div>
      <FullscreenButton />
-      <img
-        src="/img/surroundings/logo.png"
-        alt="map"
-        className="fixed 2xl:top-[1.111vw] 2xl:right-[1.111vw] top-4 right-4 2xl:w-[13.681vw] w-[197px] max-md:hidden select-none cursor-pointer"
-        draggable={false}
-        onClick={() => {
-          window.location.href = "/";
-        }}
-      />
+      <Link to="https://barahatown.com">
+        <img
+          src="/img/surroundings/logo.png"
+          alt="map"
+          className="fixed 2xl:top-[1.111vw] 2xl:right-[1.111vw] top-4 right-4 2xl:w-[13.681vw] w-[197px] max-md:hidden select-none cursor-pointer"
+          draggable={false}
+        />
+      </Link>
    </div>
  );
 }