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 Hero from './components/Hero';
|
||||
import About from './components/About';
|
||||
|
|
@ -14,6 +14,22 @@ import PlatformPage from './components/PlatformPage';
|
|||
function App() {
|
||||
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') {
|
||||
return <PrivacyPolicyPage />;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -27,9 +27,9 @@ const Footer = () => {
|
|||
<div>
|
||||
<h4 className="font-bold mb-6 text-sm uppercase tracking-wider">Nawigacja</h4>
|
||||
<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="#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>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -15,10 +15,12 @@ const Header = () => {
|
|||
}, []);
|
||||
|
||||
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: 'Proces', href: '#process' },
|
||||
{ name: 'Kontakt', href: '#contact' },
|
||||
{ name: 'Proces', href: '/#process' },
|
||||
{ name: 'Kontakt', href: '/#contact' },
|
||||
];
|
||||
|
||||
return (
|
||||
|
|
@ -43,7 +45,7 @@ const Header = () => {
|
|||
{link.name}
|
||||
</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
|
||||
</a>
|
||||
</nav>
|
||||
|
|
@ -78,7 +80,7 @@ const Header = () => {
|
|||
</a>
|
||||
))}
|
||||
<a
|
||||
href="#contact"
|
||||
href="/#contact"
|
||||
className="btn-primary text-center"
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
>
|
||||
|
|
|
|||
Loading…
Reference in a new issue