From 1fc29470faefc53f46919f4184c1d415af6eab4c Mon Sep 17 00:00:00 2001
From: zalabhavy <zalabhavy2004@gmail.com>
Date: Tue, 13 May 2025 15:58:36 +0530
Subject: [PATCH] Filter by close icon added for mobile screen

---
 .../side-filters.liquid                       |  8 ++++
 .../pages/_learning-resources-index.scss      | 38 +++++++++++++++++++
 2 files changed, 46 insertions(+)

diff --git a/src/_includes/docs/learning-resources-index/side-filters.liquid b/src/_includes/docs/learning-resources-index/side-filters.liquid
index 275a52f904..2bc732e897 100644
--- a/src/_includes/docs/learning-resources-index/side-filters.liquid
+++ b/src/_includes/docs/learning-resources-index/side-filters.liquid
@@ -1,4 +1,11 @@
+<input type="checkbox" id="close-filter-toggle" hidden>
+<div id="resource-filter-group-wrapper">
 <div id="resource-filter-group">
+<div class="filter-header">
+      <label for="close-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>
@@ -37,3 +44,4 @@
         </button>
     </div>
 </div>
+</div>
diff --git a/src/_sass/pages/_learning-resources-index.scss b/src/_sass/pages/_learning-resources-index.scss
index a9f6a303ea..f44e306124 100644
--- a/src/_sass/pages/_learning-resources-index.scss
+++ b/src/_sass/pages/_learning-resources-index.scss
@@ -1,3 +1,41 @@
+.close-icon {
+  font-size: 1rem;
+  cursor: pointer;
+}
+// smaller screen filter by
+@media (max-width: 839px) {
+  #resource-filter-group-wrapper{
+    position: fixed;
+    top: var(--site-header-height);
+    bottom: 0;
+    right: -220px;            
+    width: 220px;
+    background-color: var(--site-inset-bgColor);
+    transition: right 0.3s ease-in-out;
+    z-index: 1000;
+  }
+
+#close-filter-toggle:not(:checked) + #resource-filter-group-wrapper { right: 0; }
+#close-filter-toggle:checked     + #resource-filter-group-wrapper { right: -220px; }
+
+// close icon in small screen
+  #resource-filter-group .filter-header {
+    display: flex;
+    justify-content: flex-end;
+    padding: 0.5rem 0.75rem;
+  }
+}
+// Large screens
+@media (min-width: 840px) {
+  #resource-filter-group {
+    position: static !important;
+    right: auto !important;
+  }
+  #resource-filter-group .filter-header {
+    display: none !important;
+  }
+}
+
 #resource-index-content {
   display: flex;
   flex-direction: row;