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.

Screen.Recording.2025-05-13.at.3.56.50.PM.mov

Presubmit checklist

• This PR is marked as draft with an explanation if not meant to land until a future stable release.
• This PR doesn’t contain automatically generated corrections (Grammarly or similar).
• 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).
• 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;
}
}

Screen.Recording.2025-05-13.at.4.09.17.PM.mov

[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:

website/src/content/assets/js/learning-resources-index.js

Lines 283 to 287 in a7876e7

	document.addEventListener('keydown', (event) => {
	if (event.key === 'Escape') {
	_closeMenu();
	}
	});