Filter in sidebar of adventures list page!

frontend/src/lib/components/CategoryFilterDropdown.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+	import { ADVENTURE_TYPES } from '$lib';
+	import { onMount } from 'svelte';
+
+	let types_arr: string[] = [];
+	export let types: string;
+
+	onMount(() => {
+		console.log(types);
+		types_arr = types.split(',');
+	});
+
+	function clearTypes() {
+		types = '';
+		types_arr = [];
+	}
+
+	function toggleSelect(type: string) {
+		if (types_arr.includes(type)) {
+			types_arr = types_arr.filter((t) => t !== type);
+		} else {
+			types_arr.push(type);
+		}
+		types = types_arr.join(',');
+		console.log(types);
+		console.log(types_arr);
+	}
+</script>
+
+<div class="collapse collapse-plus bg-base-300 mb-4 overflow-visible">
+	<input type="checkbox" />
+	<div class="collapse-title text-xl font-medium">Category Filter</div>
+	<div class="collapse-content">
+		<button class="btn btn-wide mb-1 btn-neutral-300" on:click={clearTypes}>Clear</button>
+		{#each ADVENTURE_TYPES as type}
+			<!-- checkbox for each -->
+			<li>
+				<label class="cursor-pointer">
+					<input
+						type="checkbox"
+						value={type.label}
+						on:change={() => toggleSelect(type.type)}
+						checked={types.indexOf(type.type) > -1}
+					/>
+					<span>{type.label}</span>
+				</label>
+			</li>
+		{/each}
+	</div>
+</div>