From dfab85a424e24115584ca84acfc60ae23793f0cb Mon Sep 17 00:00:00 2001
From: Lanskikh <lanskikh-mikhail@mail.ru>
Date: Tue, 22 Apr 2025 13:55:24 +0500
Subject: [PATCH] fixed nav links

---
 src/components/Compass.tsx          |  2 +-
 src/components/DisclaimerButton.tsx |  2 +-
 src/components/Footer.tsx           | 50 ++++++++++++++---------------
 src/components/Header.tsx           | 36 +++++++++------------
 src/layout/DefaultLayout.tsx        |  2 +-
 src/layout/LayoutWithoutFooter.tsx  |  4 +--
 6 files changed, 46 insertions(+), 50 deletions(-)

diff --git a/src/components/Compass.tsx b/src/components/Compass.tsx
index 3e475d3..b29f03c 100644
--- a/src/components/Compass.tsx
+++ b/src/components/Compass.tsx
@@ -10,7 +10,7 @@ function Compass({ imgStyle }: CompassProps) {
       <img
         src="/images/map/compass.png"
         className={clsx(
-          "lg:w-[7.222vw] w-26 pointer-events-none absolute lg:left-[1.667vw] md:max-lg:bottom-4 left-4 lg:bottom-[1.667vw] max-md:hidden z-10"
+          "2xl:w-[7.222vw] w-26 pointer-events-none absolute 2xl:left-[1.667vw] md:max-2xl:bottom-4 left-4 2xl:bottom-[1.667vw] max-md:hidden z-10"
         )}
         style={imgStyle}
       />
diff --git a/src/components/DisclaimerButton.tsx b/src/components/DisclaimerButton.tsx
index 7a2896d..f66a37e 100644
--- a/src/components/DisclaimerButton.tsx
+++ b/src/components/DisclaimerButton.tsx
@@ -12,7 +12,7 @@ export default function BottomButton() {
       variant="secondary"
       onClick={() => setModal(<DisclaimerModal />)}
     >
-      <span className="w-5 h-5 lg:w-[1.389vw] lg:h-[1.389vw]">
+      <span className="w-5 h-5 2xl:w-[1.389vw] 2xl:h-[1.389vw]">
         <DisclaimerIcon />
       </span>
       <span>Disclaimer</span>
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index e508485..15c69cb 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -7,17 +7,17 @@ import TwitterIcon from "./icons/TwitterIcon";
 
 function Footer() {
   return (
-    <footer className="2xl:px-[2.222vw] 2xl:pb-[2.222vw] 2xl:pt-[2.778vw] md:max-2xl:p-6 px-4 py-6 grid md:grid-cols-6 grid-cols-3 2xl:grid-rows-2 2xl:gap-x-[1.667vw] 2xl:gap-y-[1.111vw] max-2xl:gap-y-6 2xl:rounded-t-[1.667vw] rounded-t-3xl outline outline-[#E2E2DC]">
+    <footer className="lg:px-[2.222vw] lg:pb-[2.222vw] lg:pt-[2.778vw] md:max-lg:p-6 px-4 py-6 grid md:grid-cols-6 grid-cols-3 lg:grid-rows-2 lg:gap-x-[1.667vw] lg:gap-y-[1.111vw] max-lg:gap-y-6 lg:rounded-t-[1.667vw] rounded-t-3xl outline outline-[#E2E2DC]">
       <img
         src="/images/logo.svg"
-        className="2xl:w-[5.972vw] w-[86px] cursor-pointer"
+        className="lg:w-[5.972vw] w-[86px] cursor-pointer"
         onClick={() => {
           window.location.href = "/";
         }}
         alt="IRTH"
       />
 
-      <p className="2xl:max-w-[17.083vw] text-s text-[#0D1922]/40 2xl:col-start-1 md:max-2xl:col-start-4 max-2xl:col-span-3 md:max-2xl:row-start-2 max-md:row-start-3 max-2xl:pt-4 max-2xl:border-t border-[#E2E2DC]">
+      <p className="lg:max-w-[17.083vw] text-s text-[#0D1922]/40 lg:col-start-1 md:max-lg:col-start-4 max-lg:col-span-3 md:max-lg:row-start-2 max-md:row-start-3 max-lg:pt-4 max-lg:border-t border-[#E2E2DC]">
         For more information, visit
         <br />
         our website: 
@@ -26,77 +26,77 @@ function Footer() {
         </Link>
       </p>
 
-      <div className="2xl:space-y-[0.833vw] space-y-3 md:max-2xl:col-start-4 max-2xl:col-span-3 md:max-2xl:row-start-3 max-md:row-start-4 max-2xl:mb-9">
+      <div className="lg:space-y-[0.833vw] space-y-3 md:max-lg:col-start-4 max-lg:col-span-3 md:max-lg:row-start-3 max-md:row-start-4 max-lg:mb-9">
         <p className="text-s text-[#0D1922]/40">Follow us for more:</p>
-        <div className="flex 2xl:gap-[0.278vw] gap-1">
-          <div className="2xl:p-[0.417vw] p-1.5 bg-[#E2E2DC] 2xl:rounded-[0.278vw] rounded">
-            <div className="2xl:w-[1.389vw] 2xl:h-[1.389vw] w-5 h-5 text-[#0D1922]/70">
+        <div className="flex lg:gap-[0.278vw] gap-1">
+          <div className="lg:p-[0.417vw] p-1.5 bg-[#E2E2DC] lg:rounded-[0.278vw] rounded">
+            <div className="lg:w-[1.389vw] lg:h-[1.389vw] w-5 h-5 text-[#0D1922]/70">
               <YoutubeIcon />
             </div>
           </div>
-          <div className="2xl:p-[0.417vw] p-1.5 bg-[#E2E2DC] 2xl:rounded-[0.278vw] rounded">
-            <div className="2xl:w-[1.389vw] 2xl:h-[1.389vw] w-5 h-5 text-[#0D1922]/70">
+          <div className="lg:p-[0.417vw] p-1.5 bg-[#E2E2DC] lg:rounded-[0.278vw] rounded">
+            <div className="lg:w-[1.389vw] lg:h-[1.389vw] w-5 h-5 text-[#0D1922]/70">
               <InstagramIcon />
             </div>
           </div>
-          <div className="2xl:p-[0.417vw] p-1.5 bg-[#E2E2DC] 2xl:rounded-[0.278vw] rounded">
-            <div className="2xl:w-[1.389vw] 2xl:h-[1.389vw] w-5 h-5 text-[#0D1922]/70">
+          <div className="lg:p-[0.417vw] p-1.5 bg-[#E2E2DC] lg:rounded-[0.278vw] rounded">
+            <div className="lg:w-[1.389vw] lg:h-[1.389vw] w-5 h-5 text-[#0D1922]/70">
               <FacebookIcon />
             </div>
           </div>
-          <div className="2xl:p-[0.417vw] p-1.5 bg-[#E2E2DC] 2xl:rounded-[0.278vw] rounded">
-            <div className="2xl:w-[1.389vw] 2xl:h-[1.389vw] w-5 h-5 text-[#0D1922]/70">
+          <div className="lg:p-[0.417vw] p-1.5 bg-[#E2E2DC] lg:rounded-[0.278vw] rounded">
+            <div className="lg:w-[1.389vw] lg:h-[1.389vw] w-5 h-5 text-[#0D1922]/70">
               <LinkedInIcon />
             </div>
           </div>
-          <div className="2xl:p-[0.417vw] p-1.5 bg-[#E2E2DC] 2xl:rounded-[0.278vw] rounded">
-            <div className="2xl:w-[1.389vw] 2xl:h-[1.389vw] w-5 h-5 text-[#0D1922]/70">
+          <div className="lg:p-[0.417vw] p-1.5 bg-[#E2E2DC] lg:rounded-[0.278vw] rounded">
+            <div className="lg:w-[1.389vw] lg:h-[1.389vw] w-5 h-5 text-[#0D1922]/70">
               <TwitterIcon />
             </div>
           </div>
         </div>
       </div>
 
-      <div className="2xl:border-l-[0.069vw] border-[#E2E2DC] 2xl:pl-[1.111vw] flex flex-col 2xl:col-start-4 2xl:row-start-1 2xl:row-span-2 md:max-2xl:col-start-4 col-start-1 max-2xl:pt-4 max-2xl:border-t">
-        <Link to={"/"} className="text-m flex-1 content-center max-2xl:py-2.5">
+      <div className="lg:border-l-[0.069vw] border-[#E2E2DC] lg:pl-[1.111vw] flex flex-col lg:col-start-4 lg:row-start-1 lg:row-span-2 md:max-lg:col-start-4 col-start-1 max-lg:pt-4 max-lg:border-t">
+        <Link to={"/"} className="text-m flex-1 content-center max-lg:py-2.5">
           Map
         </Link>
         <Link
           to={"/unit-types"}
-          className="text-m flex-1 content-center max-2xl:py-2.5"
+          className="text-m flex-1 content-center max-lg:py-2.5"
         >
           Unit Types
         </Link>
         <Link
           to={"/about-irth"}
-          className="text-m flex-1 content-center max-2xl:py-2.5"
+          className="text-m flex-1 content-center max-lg:py-2.5"
         >
           About IRTH
         </Link>
       </div>
 
-      <div className="2xl:border-l-[0.069vw] border-[#E2E2DC] 2xl:pl-[1.111vw] flex flex-col 2xl:col-start-5 2xl:row-start-1 2xl:row-span-2 max-2xl:col-span-2 max-2xl:pt-4 max-2xl:border-t">
+      <div className="lg:border-l-[0.069vw] border-[#E2E2DC] lg:pl-[1.111vw] flex flex-col lg:col-start-5 lg:row-start-1 lg:row-span-2 max-lg:col-span-2 max-lg:pt-4 max-lg:border-t">
         <Link
           to={"/favorites"}
-          className="text-m flex-1 content-center max-2xl:py-2.5"
+          className="text-m flex-1 content-center max-lg:py-2.5"
         >
           Favorites
         </Link>
         <Link
           to={"/search"}
-          className="text-m flex-1 content-center max-2xl:py-2.5"
+          className="text-m flex-1 content-center max-lg:py-2.5"
         >
           Search
         </Link>
-        <Link to={"/"} className="text-m flex-1 content-center max-2xl:py-2.5">
+        <Link to={"/"} className="text-m flex-1 content-center max-lg:py-2.5">
           Brochures
         </Link>
       </div>
 
-      <div className="content-end 2xl:text-right 2xl:col-start-6 2xl:row-start-1 2xl:row-span-2 md:max-2xl:col-start-1 md:max-2xl:row-start-3 max-md:col-span-3 max-md:pt-3 max-md:border-t border-[#E2E2DC]">
+      <div className="content-end lg:text-right lg:col-start-6 lg:row-start-1 lg:row-span-2 md:max-lg:col-start-1 md:max-lg:row-start-3 max-md:col-span-3 max-md:pt-3 max-md:border-t border-[#E2E2DC]">
         <Link
           to={"/"}
-          className="2xl:text-caption-m text-caption-s max-2xl:text-[#73787C]"
+          className="lg:text-caption-m text-caption-s max-lg:text-[#73787C]"
         >
           Privacy Policy
         </Link>
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 68ab3a7..9c14c8a 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -12,7 +12,7 @@ function Header() {
   }
 
   return (
-    <div className="sticky top-0 left-0 w-full h-16 md:max-2xl:h-18 2xl:h-[4.444vw] flex items-center justify-center bg-white outline outline-[#E2E2DC]">
+    <header className="sticky top-0 left-0 w-full h-16 md:max-2xl:h-18 2xl:h-[4.444vw] flex items-center justify-center bg-white outline outline-[#E2E2DC]">
       <div className="flex 2xl:gap-[1.111vw] gap-4 flex-1">
         <div
           className="2xl:px-[1.667vw] 2xl:py-[1.111vw] md:max-2xl:p-4 max-md:px-4 max-md:py-5 cursor-pointer"
@@ -35,7 +35,7 @@ function Header() {
       <div className="flex-1 flex justify-end">
         <ProfileBar />
       </div>
-    </div>
+    </header>
   );
 }
 
@@ -72,7 +72,7 @@ function NavItem({ href, title }: { href: string; title: string }) {
       to={href}
       className={({ isActive }) =>
         clsx(
-          "text-m 2xl:px-[1.25vw] 2xl:py-[0.903vw] px-4.5 py-[13px] 2xl:rounded-[0.833vw] rounded-xl transition-colors duration-300 !leading-none",
+          "text-[0.972vw] 2xl:px-[1.25vw] 2xl:py-[0.903vw] px-4.5 py-[13px] 2xl:rounded-[0.833vw] rounded-xl transition-colors duration-300 !leading-none",
           isActive && "bg-[#00BED7] text-[#FFFFFF]"
         )
       }
@@ -94,23 +94,19 @@ function BrochuresDropdown() {
   const [opened, setOpened] = useState(false);
 
   return (
-    <div>
-      <button
-        className="2xl:px-[0.972vw] 2xl:py-[0.694vw] px-3.5 py-2.5 flex items-center"
-        onClick={() => setOpened((prev) => !prev)}
+    <button
+      className="2xl:px-[0.972vw] 2xl:py-[0.694vw] px-3.5 py-2.5 flex items-center"
+      onClick={() => setOpened((prev) => !prev)}
+    >
+      <span className="text-[0.972vw] leading-none">Brochures</span>
+      <span
+        className={clsx(
+          "text-[#0D1922] 2xl:w-[1.389vw] 2xl:h-[1.389vw] w-5 h-5 transition-transform duration-300",
+          opened && "rotate-180"
+        )}
       >
-        <p className="2xl:px-[0.278vw] 2xl:py-[0.208vw] px-1 py-[3px]">
-          <span className="text-m">Brochures</span>
-        </p>
-        <span
-          className={clsx(
-            "text-[#0D1922] 2xl:w-[1.389vw] 2xl:h-[1.389vw] w-5 h-5 transition-transform duration-300",
-            opened && "rotate-180"
-          )}
-        >
-          <ArrowDownIcon />
-        </span>
-      </button>
-    </div>
+        <ArrowDownIcon />
+      </span>
+    </button>
   );
 }
diff --git a/src/layout/DefaultLayout.tsx b/src/layout/DefaultLayout.tsx
index b8c9c35..25d0549 100644
--- a/src/layout/DefaultLayout.tsx
+++ b/src/layout/DefaultLayout.tsx
@@ -6,7 +6,7 @@ function DefaultLayout() {
   return (
     <div className="select-none flex flex-col">
       <Header />
-      <div className="h-[calc(100dvh-64px)] md:max-2xl:h-[calc(100dvh-56px)] 2xl:h-[calc(100dvh-3.889vw)]">
+      <div className="h-[calc(100dvh-64px)] md:max-2xl:h-[calc(100dvh-72px)] 2xl:h-[calc(100dvh-4.444vw)]">
         <Outlet />
       </div>
       <Footer />
diff --git a/src/layout/LayoutWithoutFooter.tsx b/src/layout/LayoutWithoutFooter.tsx
index 55e585b..a1f5af3 100644
--- a/src/layout/LayoutWithoutFooter.tsx
+++ b/src/layout/LayoutWithoutFooter.tsx
@@ -3,9 +3,9 @@ import { Outlet } from "react-router";
 
 function LayoutWithoutFooter() {
   return (
-    <div className="select-none flex flex-col">
+    <div className="flex flex-col select-none">
       <Header />
-      <div className="h-[calc(100dvh-3.889vw)] max-2xl:h-[calc(100dvh-56px)] max-md:h-[calc(100dvh-64px)]">
+      <div className="2xl:h-[calc(100dvh-4.444vw)] md:max-2xl:h-[calc(100dvh-72px)] h-[calc(100dvh-64px)]">
         <Outlet />
       </div>
     </div>