Merge branch 'main' into matteing-sprint-1

# Conflicts:
#	src/components/ListComponent.css
#	src/components/ListComponent.tsx
#	src/pages/AdviceListPage.tsx
#	src/pages/Home.tsx
#	src/pages/LawListPage.tsx
#	src/types.ts

src/components/DropdownComponent.css

@@ -0,0 +1,3 @@
+.accordion-list-container {
+    width: 100%;
+}

src/components/DropdownComponent.tsx

@@ -0,0 +1,34 @@
+import {
+  IonAccordion,
+  IonAccordionGroup,
+  IonItem,
+  IonLabel,
+} from "@ionic/react";
+import ListComponent from "../components/ListComponent";
+import { Category } from "../types";
+import "./DropdownComponent.css";
+
+const DropdownComponent: React.FC<{
+  category: Category[];
+}> = (props) => {
+  const category = props.category;
+  return (
+    <IonAccordionGroup>
+      {category.map((catItem: Category, index) => {
+        return (
+          <IonAccordion value={`${index}`}>
+            <IonItem slot="header" color="light">
+              <IonLabel>{catItem.name}</IonLabel>
+            </IonItem>
+            <IonItem slot="content">
+              <div className="accordion-list-container">
+                <ListComponent items={catItem.listItems} />
+              </div>
+            </IonItem>
+          </IonAccordion>
+        );
+      })}
+    </IonAccordionGroup>
+  );
+};
+export default DropdownComponent;