margins and close button

Author: LvanWissen

src/lib/components/Map.svelte

@@ -157,9 +157,11 @@
 				'any',
 				...selectedVenueTypes.map((type) => ['in', type.value, ['get', 'type']])
 			];
+			// @ts-ignore
 			filter = ['all', filter, typeFilter];
 		}
 
+		// @ts-ignore
 		$map?.setFilter('venues', filter);
 	};
 
@@ -223,7 +225,7 @@
 	</div>
 
 	<!-- TypeFilter-->
-	<div class="absolute top-0 right-0 z-10 mr-4 w-48 md:w-64 lg:w-80 xl:w-96">
+	<div class="absolute top-0 right-0 z-10 mr-2 w-48 sm:mr-4 md:w-64 lg:w-80 xl:w-96">
 		<TypeFilter bind:selectedVenueTypes />
 	</div>
 

src/lib/components/Sidebar.svelte

@@ -2,16 +2,29 @@
 	import { selectedFeature, filteredVisibleFeatures, countFeatures } from '$lib/stores';
 	import Venue from '$lib/components/Venue.svelte';
 	import VenuePreviewList from '$lib/components/VenuePreviewList.svelte';
+
+	import { X } from '@lucide/svelte';
 </script>
 
 {#if $selectedFeature}
 	<div class="h-full overflow-auto">
 		<div class="card-body flex h-full flex-col p-4 pb-0">
-			<div class="flex-none px-4">
-				<h2 class="card-title text-2xl font-semibold">Details</h2>
-				<p>Showing venue details</p>
+			<div class="flex flex-none items-center justify-between px-4">
+				<div>
+					<h2 class="card-title text-2xl font-semibold">Details</h2>
+					<p>Showing venue details</p>
+				</div>
+				<button
+					class="btn btn-ghost"
+					on:click={($selectedFeature = null)}
+					aria-label="Close venue details"
+				>
+					<X />
+				</button>
 			</div>
-			<Venue venue={$selectedFeature} />
+			{#if $selectedFeature}
+				<Venue venue={$selectedFeature} />
+			{/if}
 		</div>
 	</div>
 {:else}

src/lib/components/TypeFilter.svelte

@@ -11,7 +11,7 @@
 			const venue: Venue = JSON.parse(feature.properties.venue);
 			return (
 				selectedVenueTypes.length === 0 ||
-				selectedVenueTypes.some((option) =>
+				selectedVenueTypes.some((option: { label: string; value: string }) =>
 					venue.additionalType.some((type) => type['@id'] === option.value)
 				)
 			);