Merge branch 'feature/accordion-collapse' into develop

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) {
@@ -30,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)}`}
         {