diff --git a/packages/bruno-app/src/components/Sidebar/SidebarSection/index.js b/packages/bruno-app/src/components/Sidebar/SidebarSection/index.js
index c43e2ccf2..bd2fbec37 100644
--- a/packages/bruno-app/src/components/Sidebar/SidebarSection/index.js
+++ b/packages/bruno-app/src/components/Sidebar/SidebarSection/index.js
@@ -66,7 +66,12 @@ const SidebarSection = ({
{actions && (
e.stopPropagation()}
+ onClick={(e) => {
+ e.stopPropagation();
+ if (!localExpanded) {
+ setSectionExpanded(id, true);
+ }
+ }}
>
{actions}
diff --git a/tests/sidebar/section-auto-expand.spec.ts b/tests/sidebar/section-auto-expand.spec.ts
new file mode 100644
index 000000000..406d4260d
--- /dev/null
+++ b/tests/sidebar/section-auto-expand.spec.ts
@@ -0,0 +1,74 @@
+import { test, expect } from '../../playwright';
+
+test.describe('Sidebar Section Auto-Expand', () => {
+ test('Clicking action button on collapsed section should expand it', async ({ page }) => {
+ // The api-specs section is collapsed by default (only collections is expanded)
+ // Find the api-specs section by its title
+ const apiSpecsSection = page.locator('.sidebar-section').filter({ hasText: 'API Specs' });
+
+ // Verify the api-specs section is initially collapsed (doesn't have 'expanded' class)
+ await expect(apiSpecsSection).not.toHaveClass(/expanded/);
+
+ // Verify section-content is not visible when collapsed
+ const sectionContent = apiSpecsSection.locator('.section-content');
+ await expect(sectionContent).not.toBeVisible();
+
+ // Click on the add button in the section-actions area
+ // This should trigger the auto-expand logic
+ const addButton = page.getByTestId('api-specs-header-add-menu');
+ await addButton.click();
+
+ // Close the dropdown by pressing Escape (we just want to test the expand, not the dropdown action)
+ await page.keyboard.press('Escape');
+
+ // After clicking an action, the section should be expanded
+ await expect(apiSpecsSection).toHaveClass(/expanded/);
+
+ // Verify section-content is now visible
+ await expect(sectionContent).toBeVisible();
+ });
+
+ test('Clicking action button on already expanded section should keep it expanded', async ({ page }) => {
+ // The collections section is expanded by default
+ const collectionsSection = page.locator('.sidebar-section').filter({ hasText: 'Collections' });
+
+ // Verify the collections section is initially expanded
+ await expect(collectionsSection).toHaveClass(/expanded/);
+
+ // Verify section-content is visible
+ const sectionContent = collectionsSection.locator('.section-content');
+ await expect(sectionContent).toBeVisible();
+
+ // Click on the add button in the section-actions area
+ const addButton = page.getByTestId('collections-header-add-menu');
+ await addButton.click();
+
+ // Close the dropdown
+ await page.keyboard.press('Escape');
+
+ // Section should still be expanded
+ await expect(collectionsSection).toHaveClass(/expanded/);
+ await expect(sectionContent).toBeVisible();
+ });
+
+ test('Clicking search action on collapsed collections section should expand it', async ({ page }) => {
+ // First, collapse the collections section by clicking on its header
+ const collectionsSection = page.locator('.sidebar-section').filter({ hasText: 'Collections' });
+ const sectionHeader = collectionsSection.locator('.section-header-left');
+ await sectionHeader.click();
+
+ // Verify the section is now collapsed
+ await expect(collectionsSection).not.toHaveClass(/expanded/);
+ const sectionContent = collectionsSection.locator('.section-content');
+ await expect(sectionContent).not.toBeVisible();
+
+ // Now click on the search action button in the collapsed section
+ // The search button is in section-actions with title "Search requests"
+ const searchButton = collectionsSection.locator('.section-actions button[title="Search requests"]');
+ await searchButton.click();
+
+ // The section should now be expanded
+ await expect(collectionsSection).toHaveClass(/expanded/);
+ await expect(sectionContent).toBeVisible();
+ });
+});