Issue #162 done

NIAEFEUP · Feb 10, 2025 · 5082243 · 5082243
1 parent 2406b51
commit 5082243
Showing 1 changed file with 34 additions and 13 deletions.
diff --git a/content-scripts/modules/options/options.ts b/content-scripts/modules/options/options.ts
@@ -71,19 +71,40 @@ export const useNavBar = async (navbar: string): Promise<void> => {
 };
 
 export const expandSections = async (expand: string): Promise<void> => {
-    const expandableCards = document.querySelectorAll<HTMLElement>(".se-expandable-card-wrapper");
+    await new Promise(resolve => setTimeout(resolve, 100)); // 100ms delay
 
-    switch (expand) {
-        case "on":
-            expandableCards.forEach((card) => {
-                card.style.maxHeight = `${card.scrollHeight}px`;
-            });
-            break;
+    const expandableCards = document.querySelectorAll<HTMLElement>(".se-expandable-card");
 
-        case "off":
-            expandableCards.forEach((card) => {
-                card.style.maxHeight = "0px";
-            });
-            break;
-    }
+    expandableCards.forEach((card) => {
+        const content = card.querySelector<HTMLElement>(".se-expandable-card-wrapper");
+        const header = card.querySelector<HTMLElement>(".se-card-header");
+
+        if (!content || !header) return;
+
+        const button = header.querySelector<HTMLButtonElement>(".se-card-expand-button");
+
+        if (!button) return;
+
+        content.style.transition = "none";
+
+        switch (expand) {
+            case "on":
+                content.style.maxHeight = "9999px";
+                button.dataset.expanded = "true";
+                button.animate(
+                    [{ transform: "rotate(0deg)" }, { transform: "rotate(180deg)" }],
+                    { duration: 300, fill: "forwards", easing: "ease-in-out" }
+                );
+                break;
+
+            case "off":
+                content.style.maxHeight = "0px";
+                button.dataset.expanded = "false";
+                button.animate(
+                    [{ transform: "rotate(180deg)" }, { transform: "rotate(0deg)" }],
+                    { duration: 300, fill: "forwards", easing: "ease-in-out" }
+                );
+                break;
+        }
+    });
 };