inmake/irth-new-client
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fixed nav links

Browse Source
This commit is contained in:
Lanskikh
2025-04-22 13:55:24 +05:00
parent 16ef9c5dce
commit dfab85a424
6 changed files with 46 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Compass.tsx
+1 -1
View File
@@ -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}
/>
src/components/DisclaimerButton.tsx
+1 -1
View File
@@ -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>
src/components/Footer.tsx
+25 -25
View File
@@ -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>
src/components/Header.tsx
+16 -20
View File
@@ -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>
);
}
src/layout/DefaultLayout.tsx
+1 -1
View File
@@ -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 />
src/layout/LayoutWithoutFooter.tsx
+2 -2
View File
@@ -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>