From 531c899ebf1b8aaba986e06acb5f60f6a71ba449 Mon Sep 17 00:00:00 2001
From: Abhishek7Tech <abhishektab45@gmail.com>
Date: Thu, 13 Aug 2026 19:29:02 +0530
Subject: [PATCH 1/2] add checkbox to side bar items

---
 src/components/atoms/Filter/Filter.tsx | 45 +++++++++++++++-----------
 1 file changed, 27 insertions(+), 18 deletions(-)

diff --git a/src/components/atoms/Filter/Filter.tsx b/src/components/atoms/Filter/Filter.tsx
index 75fca0946a..03dfd3236f 100644
--- a/src/components/atoms/Filter/Filter.tsx
+++ b/src/components/atoms/Filter/Filter.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import * as React from 'react';
+import { Check } from 'lucide-react';
 import { cn } from '@/libs/utils/utils';
 import { Button } from '../Button/Button';
 import { Container } from '../Container/Container';
@@ -71,26 +72,34 @@ function FilterItem({
   children: React.ReactNode;
 } & React.ButtonHTMLAttributes<HTMLButtonElement>) {
   return (
-    <Button
-      type="button"
-      data-slot="filter-item"
-      data-testid="filter-item"
-      data-selected={isSelected ? 'true' : 'false'}
-      aria-pressed={isSelected}
+    <Container
       overrideDefaults
-      className={cn(
-        'flex cursor-pointer gap-2 text-base font-medium transition-colors',
-        'border-0 bg-transparent p-0 text-left',
-        'items-center justify-normal',
-        isSelected ? 'text-foreground' : 'text-muted-foreground hover:text-foreground/80',
-        'm-0 h-full px-0 py-1',
-        className,
-      )}
-      onClick={onClick}
-      {...props}
+      data-slot="filter-item-container"
+      data-testid="filter-item-container"
+      className="flex items-center justify-between"
     >
-      {children}
-    </Button>
+      <Button
+        type="button"
+        data-slot="filter-item"
+        data-testid="filter-item"
+        data-selected={isSelected ? 'true' : 'false'}
+        aria-pressed={isSelected}
+        overrideDefaults
+        className={cn(
+          'flex cursor-pointer gap-2 text-base font-medium transition-colors',
+          'border-0 bg-transparent p-0 text-left',
+          'items-center justify-normal',
+          isSelected ? 'text-foreground' : 'text-muted-foreground hover:text-foreground/80',
+          'm-0 h-full px-0 py-1',
+          className,
+        )}
+        onClick={onClick}
+        {...props}
+      >
+        {children}
+      </Button>
+      {isSelected && <Check></Check>}
+    </Container>
   );
 }
 

From b0fc173983ec4a16af71fc7368e11f571eeaced2 Mon Sep 17 00:00:00 2001
From: Abhishek7Tech <abhishektab45@gmail.com>
Date: Thu, 13 Aug 2026 19:35:38 +0530
Subject: [PATCH 2/2] disable checkbox for larger screen sizes

---
 src/components/atoms/Filter/Filter.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/atoms/Filter/Filter.tsx b/src/components/atoms/Filter/Filter.tsx
index 03dfd3236f..ee36c88a6c 100644
--- a/src/components/atoms/Filter/Filter.tsx
+++ b/src/components/atoms/Filter/Filter.tsx
@@ -98,7 +98,7 @@ function FilterItem({
       >
         {children}
       </Button>
-      {isSelected && <Check></Check>}
+      {isSelected && <Check className="lg:hidden"></Check>}
     </Container>
   );
 }