fix: implement cross browser testing, close on resize

green-ecolution · Jun 6, 2024 · 3ae1fc5 · 3ae1fc5
1 parent fa17432
commit 3ae1fc5
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 15 deletions.
diff --git a/src/tsx/components/Accordion.tsx b/src/tsx/components/Accordion.tsx
@@ -7,26 +7,31 @@ interface AccordionProps {
 
 const Accordion: React.FC<AccordionProps> = ({ label, children }) => {
     const [open, setOpen] = useState(false);
-    const [maxHeight, setMaxHeight] = useState('0px');
-    const contentRef = useRef<HTMLDivElement>(null);
+    const [maxHeight, setMaxHeight] = useState('auto');
+    const accordionPanel = useRef<HTMLDivElement>(null);
 
     const toggleAccordion = () => {
         setOpen(!open);
     };
 
     useEffect(() => {
-        if (contentRef.current) {
-            if (open) {
-                setMaxHeight(`${contentRef.current.scrollHeight + 40}px`);
-            } else {
-                setMaxHeight(`${contentRef.current.scrollHeight + 40}px`);
-                setTimeout(() => setMaxHeight('0px'), 0);
-            }
+        if (! accordionPanel.current) return;
+        setMaxHeight(`${accordionPanel.current.scrollHeight + 40}px`);
+
+        if (! open) {
+            setTimeout(() => setMaxHeight('0px'), 0);
         }
     }, [open]);
 
+    React.useEffect(() => {
+        function handleResize() { setOpen(false) }
+        window.addEventListener('resize', handleResize);
+
+        return () => { window.removeEventListener('resize', handleResize) };
+    }, []);
+
     return (
-        <details className={`cursor-pointer border border-green-dark-900 rounded-2xl shadow-md ${open ? 'border-green-light-900' : 'border-green-dark-900'}`}>
+        <li className={`cursor-pointer border border-green-dark-900 rounded-2xl shadow-md ${open ? 'border-green-light-900' : 'border-green-dark-900'}`}>
             <summary
                 aria-expanded={open}
                 className={`px-4 py-3 rounded-t-2xl cursor-pointer flex items-center justify-between gap-x-4 font-semibold font-lato transition-color ease-in-out duration-300 md:px-6 md:py-4 hover:bg-green-dark-900/10 ${open ? 'bg-green-light-900/10' : ''}`}
@@ -42,13 +47,13 @@ const Accordion: React.FC<AccordionProps> = ({ label, children }) => {
                 </figure>
             </summary>
             <div
-                ref={contentRef}
+                ref={accordionPanel}
                 style={{maxHeight}}
-                className={`overflow-hidden px-4 transition-all ease-in-out duration-300 border-t md:px-6 ${open ? 'border-t-green-light-900 pt-3 py-4 md:pb-6' : 'border-t-transparent'}`}
+                className={`text-base leading-relaxed overflow-hidden px-4 transition-all ease-in-out duration-300 border-t md:px-6 ${open ? 'border-t-green-light-900 pt-3 py-4 md:pb-6' : 'border-t-transparent'}`}
             >
                 {children}
             </div>
-        </details>
+        </li>
     );
 };
 

diff --git a/src/tsx/components/Faq.tsx b/src/tsx/components/Faq.tsx
@@ -6,7 +6,7 @@ function Faq() {
         <h2 className="font-lato font-bold text-center text-2xl mb-6 lg:mb-10 lg:text-3xl">
             Oft gestellte Fragen zu Green Ecolution
         </h2>
-        <div className="flex flex-col gap-y-4 md:gap-y-6">
+        <ul className="flex flex-col gap-y-4 md:gap-y-6">
             <Accordion label="Wer steckt hinter dem Projekt Green Ecolution?">
                 <p className="mb-4">
                     Do do ex aliquip est voluptate Lorem est fugiat amet consectetur veniam irure enim id.
@@ -53,7 +53,7 @@ function Faq() {
                     Est minim fugiat amet non.
                 </p>
             </Accordion>
-        </div>
+        </ul>
     </section>
   );
 }