Collection view selection on mobile devices

The tab-based selection of views in a collection doesn't really work on
mobile devices since it needs too much horizontal space. This leads to
text overflowing buttons as well as half of the tab bar disappearing
behind the right edge of the phone screen.

This patch modifies the navigation by keeping the current tabs in
desktop mode, but switching to a very compact dropdown on mobile
devices.

The functionality of both elements is identical.

frontend/src/routes/collections/[id]/+page.svelte

@@ -308,6 +308,10 @@
 		}
 	}
 
+	function changeHash(event) {
+		window.location.hash = '#' + event.target.value;
+	}
+
 	onMount(() => {
 		if (data.props.adventure) {
 			collection = data.props.adventure;
@@ -772,7 +776,17 @@
 	{/if}
 
 	{#if collection.id}
-		<div class="flex justify-center mx-auto">
+		<select class="select select-bordered border-primary md:hidden w-full"
+			value={currentView}
+			on:change={changeHash}
+		>
+			<option value="itinerary">📅 Itinerary</option>
+			<option value="all">🗒️ All Linked Items</option>
+			<option value="calendar">🗓️ Calendar</option>
+			<option value="map">🗺️ Map</option>
+			<option value="recommendations">👍️ Recommendations</option>
+		</select>
+		<div class="md:flex justify-center mx-auto hidden">
 			<!-- svelte-ignore a11y-missing-attribute -->
 			<div role="tablist" class="tabs tabs-boxed tabs-lg max-w-full">
 				<!-- svelte-ignore a11y-missing-attribute -->