fix: linki nawigacyjne działają z podstron /privacy i /platforma
Kotwice #offerings/#process/#contact istnieją tylko na stronie głównej, więc z podstron prowadziły w pustkę. Zmienione na ścieżki bezwzględne (/#offerings, /#process, /#contact) w Header.tsx i Footer.tsx. Sama zmiana href nie wystarczyła: sekcje renderuje React, więc przy nawigacji z podstrony przeglądarka rozwiązuje kotwicę zanim element zaistnieje i zostaje na górze strony (zweryfikowane w Chrome — scrollY=0 przy sekcji na 1453px). App.tsx ponawia więc przewinięcie po zamontowaniu sekcji. Kliknięcia w obrębie strony głównej tego nie dotyczą — to nawigacja w tym samym dokumencie, którą przeglądarka obsługuje natywnie i płynnie, bez przeładowania. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
parent
9bb8795f73
commit
f3fb0a244d
18
src/App.tsx
18
src/App.tsx
|
|
@ -1,4 +1,4 @@
|
||||||
import React from 'react';
|
import React, { useEffect } from 'react';
|
||||||
import Header from './components/Header';
|
import Header from './components/Header';
|
||||||
import Hero from './components/Hero';
|
import Hero from './components/Hero';
|
||||||
import About from './components/About';
|
import About from './components/About';
|
||||||
|
|
@ -14,6 +14,22 @@ import PlatformPage from './components/PlatformPage';
|
||||||
function App() {
|
function App() {
|
||||||
const path = window.location.pathname.replace(/\/$/, '') || '/';
|
const path = window.location.pathname.replace(/\/$/, '') || '/';
|
||||||
|
|
||||||
|
// The landing sections are client-rendered, so when a /#section URL arrives
|
||||||
|
// with the initial request — following "Oferta"/"Kontakt" from /privacy or
|
||||||
|
// /platforma — the browser resolves the fragment before the target exists and
|
||||||
|
// leaves the page at the top. Re-apply the scroll once the sections are
|
||||||
|
// mounted. In-page clicks never reach this: they are same-document fragment
|
||||||
|
// navigations that the browser handles natively (smoothly, via .scroll-smooth)
|
||||||
|
// without remounting App.
|
||||||
|
useEffect(() => {
|
||||||
|
if (path !== '/') return;
|
||||||
|
const id = window.location.hash.slice(1);
|
||||||
|
if (!id) return;
|
||||||
|
// Jump rather than smooth-scroll: this only runs on a fresh load, where
|
||||||
|
// animating the full page height would just be a slow detour.
|
||||||
|
document.getElementById(id)?.scrollIntoView({ behavior: 'auto' });
|
||||||
|
}, [path]);
|
||||||
|
|
||||||
if (path === '/privacy') {
|
if (path === '/privacy') {
|
||||||
return <PrivacyPolicyPage />;
|
return <PrivacyPolicyPage />;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -27,9 +27,9 @@ const Footer = () => {
|
||||||
<div>
|
<div>
|
||||||
<h4 className="font-bold mb-6 text-sm uppercase tracking-wider">Nawigacja</h4>
|
<h4 className="font-bold mb-6 text-sm uppercase tracking-wider">Nawigacja</h4>
|
||||||
<ul className="space-y-4">
|
<ul className="space-y-4">
|
||||||
<li><a href="#offerings" className="text-muted hover:text-foreground transition-colors">Oferta</a></li>
|
<li><a href="/#offerings" className="text-muted hover:text-foreground transition-colors">Oferta</a></li>
|
||||||
<li><a href="/platforma" className="text-muted hover:text-foreground transition-colors">Platforma</a></li>
|
<li><a href="/platforma" className="text-muted hover:text-foreground transition-colors">Platforma</a></li>
|
||||||
<li><a href="#contact" className="text-muted hover:text-foreground transition-colors">Kontakt</a></li>
|
<li><a href="/#contact" className="text-muted hover:text-foreground transition-colors">Kontakt</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -15,10 +15,12 @@ const Header = () => {
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
const navLinks = [
|
const navLinks = [
|
||||||
{ name: 'Oferta', href: '#offerings' },
|
// Root-relative so the links also work from the standalone pages
|
||||||
|
// (/privacy, /platforma), where these sections do not exist.
|
||||||
|
{ name: 'Oferta', href: '/#offerings' },
|
||||||
{ name: 'Platforma', href: '/platforma' },
|
{ name: 'Platforma', href: '/platforma' },
|
||||||
{ name: 'Proces', href: '#process' },
|
{ name: 'Proces', href: '/#process' },
|
||||||
{ name: 'Kontakt', href: '#contact' },
|
{ name: 'Kontakt', href: '/#contact' },
|
||||||
];
|
];
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|
@ -43,7 +45,7 @@ const Header = () => {
|
||||||
{link.name}
|
{link.name}
|
||||||
</a>
|
</a>
|
||||||
))}
|
))}
|
||||||
<a href="#contact" className="btn-primary text-sm px-5 py-2">
|
<a href="/#contact" className="btn-primary text-sm px-5 py-2">
|
||||||
Porozmawiajmy
|
Porozmawiajmy
|
||||||
</a>
|
</a>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
@ -78,7 +80,7 @@ const Header = () => {
|
||||||
</a>
|
</a>
|
||||||
))}
|
))}
|
||||||
<a
|
<a
|
||||||
href="#contact"
|
href="/#contact"
|
||||||
className="btn-primary text-center"
|
className="btn-primary text-center"
|
||||||
onClick={() => setIsMobileMenuOpen(false)}
|
onClick={() => setIsMobileMenuOpen(false)}
|
||||||
>
|
>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue