Allow closing settings menu from three dots button (kubewarden#483)

Signed-off-by: Cintia Sanchez Garcia <[email protected]>

web/src/layout/navigation/MobileSettings.test.tsx

@@ -12,6 +12,7 @@ const mockCtx = {
     theme: { effective: 'light' },
   },
 };
+
 const mockDispatch = jest.fn();
 
 describe('MobileSettings', () => {
@@ -67,6 +68,35 @@ describe('MobileSettings', () => {
     expect(screen.getAllByRole('link')).toHaveLength(2);
   });
 
+  it('opens dropdown and closes it using Settings button', async () => {
+    render(
+      <AppContext.Provider value={{ ctx: mockCtx, dispatch: jest.fn() }}>
+        <Router>
+          <MobileSettings />
+        </Router>
+      </AppContext.Provider>
+    );
+
+    const dropdown = screen.getByRole('menu');
+    expect(dropdown).toBeInTheDocument();
+    expect(dropdown).not.toHaveClass('show');
+
+    const btn = screen.getByRole('button', { name: 'Mobile settings button' });
+    await userEvent.click(btn);
+
+    expect(dropdown).toHaveClass('show');
+    expect(screen.getByRole('radio', { name: 'Light' })).toBeInTheDocument();
+    expect(screen.getByRole('radio', { name: 'Light' })).toBeChecked();
+    expect(screen.getByRole('radio', { name: 'Dark' })).toBeInTheDocument();
+    expect(screen.getByRole('radio', { name: 'Dark' })).not.toBeChecked();
+    expect(screen.getByText('Statistics')).toBeInTheDocument();
+    expect(screen.getAllByRole('link')).toHaveLength(2);
+
+    await userEvent.click(btn);
+
+    expect(dropdown).not.toHaveClass('show');
+  });
+
   it('calls updateTheme event', async () => {
     render(
       <AppContext.Provider value={{ ctx: mockCtx, dispatch: mockDispatch }}>

web/src/layout/navigation/MobileSettings.tsx

@@ -31,7 +31,7 @@ const MobileSettings = () => {
       <button
         className={`btn btn-sm btn-primary text-white rounded-0 lh-1 ms-3 ${styles.btn}`}
         type="button"
-        onClick={() => setVisibleDropdown(true)}
+        onClick={() => setVisibleDropdown(!visibleDropdown)}
         aria-label="Mobile settings button"
         aria-expanded={visibleDropdown}
       >