max.olchov/HifiPlanet-Website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix footer legal links hidden behind floating CTA bar on homepage

Browse source 
Die fixierte "Bereit fuer deinen Sound-Umbau?"-Leiste auf der Startseite
ueberdeckte am Seitenende die letzte Footer-Zeile (Impressum/Datenschutz/
AGB-Links), da fixed-position Elemente unabhaengig vom Dokumentenfluss
ueber allem liegen. Footer reserviert jetzt auf der Startseite zusaetzlichen
unteren Abstand fuer die Leiste, auf allen anderen Seiten unveraendert.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Maaxxs 2026-07-05 15:55:31 +02:00
parent a815b0e01d
commit 060ea937e0
1 changed files with 11 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
hifi-src/src/components/Footer.jsx
View file

@ -1,4 +1,4 @@
import { Link } from 'react-router-dom'; import { Link, useLocation } from 'react-router-dom';
import DynamicIcon from './DynamicIcon.jsx'; import DynamicIcon from './DynamicIcon.jsx';
import { useCookieConsent } from '../context/CookieConsentContext.jsx'; import { useCookieConsent } from '../context/CookieConsentContext.jsx';
@ -22,9 +22,18 @@ function isOpenNow() {
export default function Footer() { export default function Footer() {
const open = isOpenNow(); const open = isOpenNow();
const { openSettings } = useCookieConsent(); const { openSettings } = useCookieConsent();
// Auf der Startseite blendet sich unten eine fixierte CTA-Leiste ein, die
// sonst die letzte Footer-Zeile (Impressum-Links) verdeckt - deshalb dort
// zusätzlichen Platz für sie freihalten.
const { pathname } = useLocation();
const isHome = pathname === '/';
return ( return (
<footer className="border-t border-slate-200 bg-slate-50 py-10 text-sm text-slate-600 dark:border-slate-800 dark:bg-slate-950 dark:text-slate-300"> <footer
className={`border-t border-slate-200 bg-slate-50 py-10 text-sm text-slate-600 dark:border-slate-800 dark:bg-slate-950 dark:text-slate-300 ${
isHome ? 'pb-24' : ''
}`}
>
<div className="mx-auto grid max-w-6xl gap-4 px-4 sm:grid-cols-3 sm:px-6"> <div className="mx-auto grid max-w-6xl gap-4 px-4 sm:grid-cols-3 sm:px-6">
<div className="rounded-xl border border-slate-200 bg-white p-5 dark:border-slate-800 dark:bg-slate-900"> <div className="rounded-xl border border-slate-200 bg-white p-5 dark:border-slate-800 dark:bg-slate-900">
<div className="mb-3 flex items-center gap-2"> <div className="mb-3 flex items-center gap-2">