From fb313d8dc6a82e92976a72db7e1c4afdc55ed61c Mon Sep 17 00:00:00 2001
From: juanatsap <juanatsap@gmail.com>
Date: Sat, 22 Nov 2025 16:31:29 +0000
Subject: [PATCH] fix: Accordion starts closed on mobile by default
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Removed 'open' attribute from accordion <details> elements to ensure sidebars
start collapsed on mobile view, providing a cleaner initial state.

Changes:
- templates/partials/cv/sidebar.html: Removed open attribute
- templates/cv-content.html: Removed open attributes (2 occurrences)
- templates/language-switch.html: Removed open attributes (2 occurrences)
- tests/mjs/43-mobile-accordion-and-modal-test.mjs: Updated test expectations

Test results:
  ✅ Accordion initially closed
  ✅ Content initially hidden
  ✅ Toggle functionality working perfectly
  ✅ Modal centering maintained (0px offset)
---
 templates/cv-content.html                     |  4 +-
 templates/language-switch.html                |  4 +-
 templates/partials/cv/sidebar.html            |  2 +-
 .../43-mobile-accordion-and-modal-test.mjs    | 45 ++++++++++++-------
 4 files changed, 35 insertions(+), 20 deletions(-)

diff --git a/templates/cv-content.html b/templates/cv-content.html
index 07180a9..62f508d 100644
--- a/templates/cv-content.html
+++ b/templates/cv-content.html
@@ -14,7 +14,7 @@
         <aside class="cv-sidebar cv-sidebar-left component-wrapper">
             <!-- Actual Content -->
             <div class="actual-content">
-                <details class="sidebar-accordion" open>
+                <details class="sidebar-accordion">
                     <summary class="sidebar-accordion-header">
                         <iconify-icon icon="mdi:brain" width="20" height="20"></iconify-icon>
                         <span>{{if eq .Lang "es"}}Competencias Técnicas{{else}}Technical Skills{{end}}</span>
@@ -93,7 +93,7 @@
         <aside class="cv-sidebar cv-sidebar-right component-wrapper">
             <!-- Actual Content -->
             <div class="actual-content">
-                <details class="sidebar-accordion" open>
+                <details class="sidebar-accordion">
                     <summary class="sidebar-accordion-header">
                         <iconify-icon icon="mdi:brain" width="20" height="20"></iconify-icon>
                         <span>{{if eq .Lang "es"}}Más Competencias{{else}}More Skills{{end}}</span>
diff --git a/templates/language-switch.html b/templates/language-switch.html
index c02079f..1bb170d 100644
--- a/templates/language-switch.html
+++ b/templates/language-switch.html
@@ -32,7 +32,7 @@
     <div class="page-content">
         <!-- Left Sidebar - Skills (first half) -->
         <aside class="cv-sidebar cv-sidebar-left">
-            <details class="sidebar-accordion" open>
+            <details class="sidebar-accordion">
                 <summary class="sidebar-accordion-header">
                     <iconify-icon icon="mdi:brain" width="20" height="20"></iconify-icon>
                     <span>{{if eq .Lang "es"}}Competencias Técnicas{{else}}Technical Skills{{end}}</span>
@@ -86,7 +86,7 @@
 
         <!-- Right Sidebar - Skills (second half) -->
         <aside class="cv-sidebar cv-sidebar-right">
-            <details class="sidebar-accordion" open>
+            <details class="sidebar-accordion">
                 <summary class="sidebar-accordion-header">
                     <iconify-icon icon="mdi:brain" width="20" height="20"></iconify-icon>
                     <span>{{if eq .Lang "es"}}Más Competencias{{else}}More Skills{{end}}</span>
diff --git a/templates/partials/cv/sidebar.html b/templates/partials/cv/sidebar.html
index 1bfee0f..1f90e8c 100644
--- a/templates/partials/cv/sidebar.html
+++ b/templates/partials/cv/sidebar.html
@@ -1,7 +1,7 @@
 {{define "sidebar"}}
 <!-- Sidebar - Reusable for left and right -->
 <aside class="cv-sidebar {{.SidebarClass}}">
-    <details class="sidebar-accordion" open>
+    <details class="sidebar-accordion">
         <summary class="sidebar-accordion-header">
             <iconify-icon icon="mdi:brain" width="20" height="20"></iconify-icon>
             <span>{{.SidebarTitle}}</span>
diff --git a/tests/mjs/43-mobile-accordion-and-modal-test.mjs b/tests/mjs/43-mobile-accordion-and-modal-test.mjs
index 2a9e192..b983f1e 100755
--- a/tests/mjs/43-mobile-accordion-and-modal-test.mjs
+++ b/tests/mjs/43-mobile-accordion-and-modal-test.mjs
@@ -35,9 +35,10 @@ const MOBILE_VIEWPORT = { width: 375, height: 667 }; // iPhone SE size
         console.log(`  • Summary elements: ${summaryCount}`);
         console.log(`  • Content elements: ${contentCount}`);
 
-        // Check if accordion is initially open
+        // Check if accordion is initially closed (should be closed on mobile)
         const isOpen = await accordionDetails.evaluate(el => el.hasAttribute('open'));
-        console.log(`  • Initially open: ${isOpen ? '✅ YES' : '❌ NO'}`);
+        console.log(`  • Initially closed: ${!isOpen ? '✅ YES' : '❌ NO (should be closed)'}`);
+        console.log(`  • Initially open: ${isOpen ? '❌ YES (should be closed)' : '✅ NO'}`);
 
         // Check if summary is visible on mobile
         const summaryDisplay = await accordionSummary.evaluate(el => {
@@ -47,30 +48,44 @@ const MOBILE_VIEWPORT = { width: 375, height: 667 }; // iPhone SE size
         console.log(`  • Summary display: ${summaryDisplay}`);
         console.log(`  • Summary visible: ${summaryDisplay !== 'none' ? '✅ YES' : '❌ NO'}`);
 
+        // Check if content is initially hidden (since accordion starts closed)
+        const initialContentHidden = await accordionContent.evaluate(el => {
+            const style = window.getComputedStyle(el);
+            return style.maxHeight === '0px' || style.opacity === '0';
+        });
+        console.log(`  • Content initially hidden: ${initialContentHidden ? '✅ YES' : '❌ NO'}`);
+
         // Test accordion toggle
         if (detailsCount > 0) {
             console.log('\n🖱️  Testing Accordion Toggle...');
 
-            // Click to close
+            // Click to OPEN (since it starts closed)
             await accordionSummary.click();
             await page.waitForTimeout(500);
 
-            const isClosedAfterClick = await accordionDetails.evaluate(el => !el.hasAttribute('open'));
-            console.log(`  • Closed after click: ${isClosedAfterClick ? '✅ YES' : '❌ NO'}`);
+            const isOpenedAfterClick = await accordionDetails.evaluate(el => el.hasAttribute('open'));
+            console.log(`  • Opened after click: ${isOpenedAfterClick ? '✅ YES' : '❌ NO'}`);
 
-            // Check if content is hidden
-            const contentHidden = await accordionContent.evaluate(el => {
+            // Check if content is now visible
+            const contentVisible = await accordionContent.evaluate(el => {
+                const style = window.getComputedStyle(el);
+                return style.opacity === '1';
+            });
+            console.log(`  • Content visible: ${contentVisible ? '✅ YES' : '❌ NO'}`);
+
+            // Click to close again
+            await accordionSummary.click();
+            await page.waitForTimeout(500);
+
+            const isClosedAgain = await accordionDetails.evaluate(el => !el.hasAttribute('open'));
+            console.log(`  • Closed after second click: ${isClosedAgain ? '✅ YES' : '❌ NO'}`);
+
+            // Verify content is hidden again
+            const contentHiddenAgain = await accordionContent.evaluate(el => {
                 const style = window.getComputedStyle(el);
                 return style.maxHeight === '0px' || style.opacity === '0';
             });
-            console.log(`  • Content hidden: ${contentHidden ? '✅ YES' : '❌ NO'}`);
-
-            // Click to reopen
-            await accordionSummary.click();
-            await page.waitForTimeout(500);
-
-            const isReopenedAfterClick = await accordionDetails.evaluate(el => el.hasAttribute('open'));
-            console.log(`  • Reopened after click: ${isReopenedAfterClick ? '✅ YES' : '❌ NO'}`);
+            console.log(`  • Content hidden again: ${contentHiddenAgain ? '✅ YES' : '❌ NO'}`);
         }
 
         // ===== TEST 2: MODAL CENTERING =====