Filter by close icon added for mobile screen (#12373)

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

Fixes #11980


https://github.com/user-attachments/assets/f5ab191f-9cdc-4a6e-b5e3-ad266eb8712f

## Presubmit checklist

- [x] If you are unwilling, or unable, to sign the CLA, even for a
_tiny_, one-word PR, please file an issue instead of a PR.
- [x] If this PR is not meant to land until a future stable release,
mark it as draft with an explanation.
- [x] This PR follows the [Google Developer Documentation Style
Guidelines](https://developers.google.com/style)—for example, it doesn't
use _i.e._ or _e.g._, and it avoids _I_ and _we_ (first-person
pronouns).
- [x] This PR uses [semantic line
breaks](https://github.com/dart-lang/site-shared/blob/main/doc/writing-for-dart-and-flutter-websites.md#semantic-line-breaks)
  of 80 characters or fewer.

---------

Co-authored-by: Parker Lougheed <parlough@gmail.com>

Author: zalabhavy

src/_includes/docs/learning-resources-index/side-filters.liquid

@@ -1,4 +1,11 @@
+<input type="checkbox" id="open-filter-toggle" hidden>
+<div id="resource-filter-group-wrapper">
 <div id="resource-filter-group">
+    <div class="filter-header">
+        <label for="open-filter-toggle" class="close-icon" aria-hidden="true">
+            <span class="material-symbols">close</span>
+        </label>
+    </div>
     <div class="table-title">Filter by</div>
     <div class="table-content">
         <h4>Subject</h4>
@@ -33,3 +40,4 @@
         </ul>
     </div>
 </div>
+</div>

src/_sass/pages/_learning-resources-index.scss

@@ -1,5 +1,81 @@
 @use '../base/mixins';
 
+#resource-filter-group-wrapper {
+  border: 1px solid var(--site-inset-borderColor);
+  background-color: var(--site-inset-bgColor);
+  border-radius: var(--site-radius);
+  overflow: hidden;
+  position: sticky;
+  top: calc(var(--site-header-height) + 1rem);
+}
+
+.filter-header {
+  display: none;
+  position: absolute;
+  top: 0;
+  right: 0;
+  padding: 0.75rem 1rem;
+  z-index: 10;
+}
+
+.close-icon {
+  cursor: pointer;
+  padding: 0.25rem;
+  border-radius: 4px;
+  background: none;
+  border: none;
+  color: var(--site-base-fgColor-alt);
+  transition: all 0.2s ease;
+  position: absolute;
+  right: 1rem;
+  top: 75%;
+  transform: translateY(-50%);
+
+  &:hover {
+    background-color: rgba(0, 0, 0, 0.1);
+    color: var(--site-primary-color);
+  }
+
+  .material-symbols {
+    font-size: 20px;
+  }
+}
+
+// Mobile screen customizations.
+@media (max-width: 839px) {
+  .filter-header {
+    display: block;
+  }
+
+  #resource-filter-group-wrapper {
+    position: fixed;
+    top: var(--site-header-height);
+    bottom: 0;
+    right: -220px;
+    width: 220px;
+    border-bottom: none;
+    height: 100%;
+    border-radius: 0;
+    transition: right 0.3s ease-in-out;
+    z-index: 1000;
+  }
+
+  #open-filter-toggle:not(:checked) + #resource-filter-group-wrapper { right: -220px; }
+  #open-filter-toggle:checked + #resource-filter-group-wrapper { right: 0; }
+}
+
+//Desktop screens 
+@media (min-width: 840px) {
+  #resource-filter-group {
+    position: static !important;
+    right: auto !important;
+  }
+
+  .filter-header {
+    display: none !important; 
+  }
+}
+
 #resource-index-content {
   display: flex;
   flex-direction: row;
@@ -43,13 +119,6 @@
 }
 
 #resource-filter-group {
-  border: 1px solid var(--site-inset-borderColor);
-  background-color: var(--site-inset-bgColor);
-  border-radius: var(--site-radius);
-  overflow: hidden;
-  position: sticky;
-  top: calc(var(--site-header-height) + 1rem);
-
   .table-title {
     text-align: center;
     color: var(--site-base-fgColor-alt);

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

@@ -265,20 +265,42 @@ function _setupDropdownMenu() {
     if (!pageContent) return;
 
     const filtersButton = pageContent.querySelector('.show-filters-button');
-    const filtersEl = pageContent.querySelector('.right-col');
+    const filtersEl = document.getElementById('resource-filter-group-wrapper') || pageContent.querySelector('.right-col');
+    const openToggleCheckbox = document.getElementById('open-filter-toggle');
+
     if (!filtersButton || !filtersEl) return;
 
     function _closeMenu() {
-        filtersEl.classList.remove('show');
+        if (openToggleCheckbox) {
+            openToggleCheckbox.checked = false;
+        } else {
+            filtersEl.classList.remove('show');
+        }
         filtersButton.ariaExpanded = 'false';
     }
 
+    function _openMenu() {
+        if (openToggleCheckbox) {
+            openToggleCheckbox.checked = true;
+        } else {
+            filtersEl.classList.add('show');
+        }
+        filtersButton.ariaExpanded = 'true';
+    }
+
+    function _isMenuOpen() {
+        if (openToggleCheckbox) {
+            return openToggleCheckbox.checked;
+        } else {
+            return filtersEl.classList.contains('show');
+        }
+    }
+
     filtersButton.addEventListener('click', (_) => {
-        if (filtersEl.classList.contains('show')) {
+        if (_isMenuOpen()) {
             _closeMenu();
         } else {
-            filtersEl.classList.add('show');
-            filtersButton.ariaExpanded = 'true';
+            _openMenu();
         }
     });
 
@@ -290,12 +312,13 @@ function _setupDropdownMenu() {
 
     // Close the dropdown if anywhere not in the filters menu is.
     const content = document.getElementById('all-resources-grid');
-    content.addEventListener('click', (_) => {
-        if (!filtersEl.classList.contains('show')) {
-            return;
-        }
-        _closeMenu();
-    });
+    if (content) {
+        content.addEventListener('click', () => {
+            if (_isMenuOpen()) {
+                _closeMenu();
+            }
+        });
+    }
 }
 
 function shuffleElements(container) {