From acaeae8d7bb2b4040113fb9f9a11bdad12c19c72 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nikola=20Dere=C5=BEi=C4=87?= <nikola.derezic@gmail.com>
Date: Thu, 1 Feb 2024 15:31:33 +0100
Subject: [PATCH 1/2] enabled accordion to be collapsed

---
 app/ui/MonthCard.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/app/ui/MonthCard.tsx b/app/ui/MonthCard.tsx
index b66db90..e3ed838 100644
--- a/app/ui/MonthCard.tsx
+++ b/app/ui/MonthCard.tsx
@@ -18,8 +18,9 @@ export const MonthCard:FC<MonthCardProps> = ({ yearMonth, children, monthlyExpen
   const router = useRouter();
   const elRef = useRef<HTMLDivElement>(null);
 
-  // setting the `month` will activate the accordion belonging to that month
-  const handleChange = (event:any) => router.push(`/?year=${yearMonth.year}&month=${yearMonth.month}`);
+  // Setting the `month` will activate the accordion belonging to that month
+  // If the accordion is already active, it will collapse it
+  const handleChange = (event:any) => router.push(expanded ? `/?year=${yearMonth.year}` : `/?year=${yearMonth.year}&month=${yearMonth.month}`);
 
   useEffect(() => {
     if(expanded && elRef.current) {

From 85aea1fa6d41e48a9ad09198859731fd578650f5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nikola=20Dere=C5=BEi=C4=87?= <nikola.derezic@gmail.com>
Date: Thu, 1 Feb 2024 15:35:44 +0100
Subject: [PATCH 2/2] changed control from radio to checkbox

---
 app/ui/MonthCard.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/ui/MonthCard.tsx b/app/ui/MonthCard.tsx
index e3ed838..706444f 100644
--- a/app/ui/MonthCard.tsx
+++ b/app/ui/MonthCard.tsx
@@ -31,7 +31,7 @@ export const MonthCard:FC<MonthCardProps> = ({ yearMonth, children, monthlyExpen
 
   return(
     <div className="collapse collapse-plus bg-base-200 my-1" ref={elRef}>
-      <input type="radio" name="my-accordion-3" checked={expanded} onChange={handleChange} /> 
+      <input type="checkbox" name="my-accordion-3" checked={expanded} onChange={handleChange} /> 
       <div className="collapse-title text-xl font-medium">
         {`${formatYearMonth(yearMonth)}`}
         {