Filter by close icon added for mobile screen

[zalabhavy]

A close icon/button should be added to the "Filter by" wrapper on mobile screens to allow users to easily close the sidebar.

Fixed #11980

he close button works properly, but despite trying multiple times, I couldn't fix the issue where, after closing the filter once, clicking the filter icon again on a mobile screen doesn't show the filter content inside the card.

https://github.com/user-attachments/assets/cf04648c-9c11-41ba-9afa-9ff73cae7c28

Presubmit checklist

• [x] This PR is marked as draft with an explanation if not meant to land until a future stable release.
• [x] This PR doesn’t contain automatically generated corrections (Grammarly or similar).
• [x] This PR follows the Google Developer Documentation Style Guidelines — for example, it doesn’t use i.e. or e.g., and it avoids I and we (first person).
• [x] This PR uses semantic line breaks of 80 characters or fewer.

[zalabhavy]

@parlough I need help. When i don't use div for resource-filter-group-wrapper and use css given below then close functionality not works but filter_list icon in mobile screen show content every time when open/close slider

.close-icon { font-size: 1rem; cursor: pointer; } // small screen @media (max-width: 839px) { #resource-filter-group { transition: right 0.3s ease-in-out; z-index: 1000; } // small screen #resource-filter-group .filter-header { display: flex; justify-content: flex-end; padding: 0.5rem 0.75rem; } } // large screen @media (min-width: 840px) { #resource-filter-group { position: static !important; right: auto !important; } #resource-filter-group .filter-header { display: none !important; } }

https://github.com/user-attachments/assets/ddd04f8a-a2ce-4c03-b9b0-113a9dfd5e73

[sfshaza2]

Please review, @parlough.

[parlough]

Thanks for working on this improvement @zalabhavy! Sorry that I haven't had a chance to review your PR yet, I've been away for the past week. I'll try to make time to review this tomorrow.

I haven't had a chance to review your CSS or investigate yet, but from a quick look at the video, I'd consider implementing the behavior of the button by adding a click handler to the button with JS, similar to the existing handling for pressing the Esc key when the panel is open. You can find that implementation in: https://github.com/flutter/website/blob/a7876e796543642a06cf10a59dfd67b3b2512d43/src/content/assets/js/learning-resources-index.js#L283-L287

[Piinks]

Greetings from stale PR triage! Is this change still active?

[zalabhavy]

@Piinks Hello ! I tried to solve this issue, but as you can see in the video, I wasn’t able to fix it. The close button works properly, but despite multiple attempts, I couldn’t resolve the problem where — after closing the filter once — clicking the filter icon again on a mobile screen doesn’t show the filter content inside the card.

[zalabhavy]

@parlough @Piinks I'm willing to work on the PR, but I need some help.

[sfshaza2]

@parlough, I know you've been traveling, but any chance you can take a look at this? If not, should I close it?

[parlough]

Sorry for the delay, I'll make sure to respond with help finishing this today!

[parlough]

Sorry again about the delay @zalabhavy. I appreciate you raising this improvement and working on this! Are you still interesting in working on this or would you like me to push the final adjustments?

If you are interested, similar to my previous comment, I suggest adding a normal button and manually adding a click handler to that with JS.

So in the HTML, I'd add a button similar to the following in the header of the sidebar:

<button id="close-filter-button" class="icon_button" aria-label="Close filter panel">
  <span class="material-symbols icon-button" aria-hidden="true" translate="no">close</span>
</button>

Then in the JS, in the _setupDropdownMenu function where we already handle other methods of closing the sidebar, retrieve the button, and use to the already existing _closeMenu() function to close the menu if it's clicked. If you go with the above HTML, it'd look something like this:

const closeFilterButton = filtersEl.querySelector('#close-filters-button');
if (closeFilterButton) {
    closeFilterButton.addEventListener('click', (_) => {
      _closeMenu();
    });
}

There might be some other small CSS changes to make to make it look better and some other JS adjustments, but let me know if you need help with those or anything else. Thanks again!

[zalabhavy]

Okay @parlough , I’ll give it a try first and then share an update with you. Thanks !

[parlough]

Thanks for the update! Closing in favor of https://github.com/flutter/website/pull/12373.