feat: Close PDF slider when clicking outside and improve UI interaction

- Implemented functionality to close the PDF slider when a click happens outside of the slider area using useRef and event listeners.
- Added dynamic loading and storing of PDFs in IndexedDB.
- Enhanced user experience with a more intuitive modal closing behavior.

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",
+    // "ACCESS.PDF",
-    "CPL.PDF",
+    // "CPL.PDF",
-    "CPL220.PDF",
+    //"CPL220.PDF",
-    "CPL3.PDF",
+    //"CPL3.PDF",
-    "Daten_APL.pdf",
+    //"Daten_APL.pdf",
-    "Daten_CDO.pdf",
+    //"Daten_CDO.pdf",
-    "Daten_DPL.pdf",
+    //"Daten_DPL.pdf",
-    "KUE605.PDF",
+    //"KUE605.PDF",
-    "KUE605uC.PDF",
+    //"KUE605uC.PDF",
-    "KUE605uF.PDF",
+    //"KUE605uF.PDF",
     "KUE705FO.PDF",
-    "Modem.pdf",
+    //"Modem.pdf",
-    "PST212.PDF",
+    //"PST212.PDF",
-    "Temper.pdf",
+    //"Temper.pdf",
-    "Wasser.pdf",
+    //"Wasser.pdf",
-    "XIOPM.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 (
     <footer className="relative bg-gray-300 p-4 overflow-hidden">
       <div className="container mx-auto flex justify-between">
@@ -97,6 +117,7 @@ function Footer() {
       </div>
 
       <div
+        ref={sliderRef}
         className={`fixed top-0 right-0 w-64 h-full bg-white shadow-lg transform transition-transform duration-300 ${
           showSlider ? "translate-x-0" : "translate-x-full"
         }`}