diff --git a/components/Footer.jsx b/components/Footer.jsx index f019acd..e81629c 100644 --- a/components/Footer.jsx +++ b/components/Footer.jsx @@ -1,5 +1,5 @@ "use client"; // Wichtig, um sicherzustellen, dass der Code nur auf dem Client ausgeführt wird -import React, { useEffect, useState } from "react"; +import React, { useEffect, useState, useRef } from "react"; import { Icon } from "@iconify/react"; // indexDB-Funktionen nur im Browser importieren @@ -13,24 +13,25 @@ if (typeof window !== "undefined") { function Footer() { const [pdfName, setPdfName] = useState(""); const [showSlider, setShowSlider] = useState(false); + const sliderRef = useRef(null); const pdfFiles = [ - "ACCESS.PDF", - "CPL.PDF", - "CPL220.PDF", - "CPL3.PDF", - "Daten_APL.pdf", - "Daten_CDO.pdf", - "Daten_DPL.pdf", - "KUE605.PDF", - "KUE605uC.PDF", - "KUE605uF.PDF", + // "ACCESS.PDF", + // "CPL.PDF", + //"CPL220.PDF", + //"CPL3.PDF", + //"Daten_APL.pdf", + //"Daten_CDO.pdf", + //"Daten_DPL.pdf", + //"KUE605.PDF", + //"KUE605uC.PDF", + //"KUE605uF.PDF", "KUE705FO.PDF", - "Modem.pdf", - "PST212.PDF", - "Temper.pdf", - "Wasser.pdf", - "XIOPM.PDF", + //"Modem.pdf", + //"PST212.PDF", + //"Temper.pdf", + //"Wasser.pdf", + //"XIOPM.PDF", ]; useEffect(() => { @@ -69,6 +70,25 @@ function Footer() { } }; + // Close slider when clicking outside + useEffect(() => { + function handleClickOutside(event) { + if (sliderRef.current && !sliderRef.current.contains(event.target)) { + setShowSlider(false); + } + } + + if (showSlider) { + document.addEventListener("mousedown", handleClickOutside); + } else { + document.removeEventListener("mousedown", handleClickOutside); + } + + return () => { + document.removeEventListener("mousedown", handleClickOutside); + }; + }, [showSlider]); + return (