style: make legend collapsible

components/geojson-map-legend.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { ChevronDown } from "lucide-vue-next";
+
 import type { GeojsonMapSchema } from "@/types/global";
 
 interface Props {
@@ -8,7 +10,6 @@ interface Props {
 const props = defineProps<Props>();
 const { params } = toRefs(props);
 
-const { colors } = useColorsStore();
 const GeojsonStore = useGeojsonStore();
 const { tables } = storeToRefs(GeojsonStore);
 
@@ -21,20 +22,28 @@ function getMatchingRowCount(columnId: string) {
 	return activeRows.value?.filter((row) => (row.getValue(columnId) as Array<unknown>).length > 0)
 		.length;
 }
+const collapsibleOpen = ref(true);
 </script>
 
 <template>
-	<div class="bg-white/80 p-2 text-xs">
-		<span
-			><b>{{ activeRows?.length }} total markers</b></span
-		>
-		<div v-for="feature in activeFeatures" :key="feature.id" class="flex items-start gap-2">
-			<svg class="mt-0.5 size-3.5">
-				<use :fill="colors.get(feature.id)?.colorCode" href="#petal"></use>
-			</svg>
-			<span class="w-32"
-				>{{ feature.columnDef.header }} ({{ getMatchingRowCount(feature.id) }})</span
+	<Collapsible v-model:open="collapsibleOpen">
+		<div class="w-48 bg-white/80 p-3 text-xs">
+			<CollapsibleTrigger class="flex w-full justify-between"
+				><b>{{ activeRows?.length }} total markers</b
+				><ChevronDown class="size-4" :class="collapsibleOpen ? '' : 'rotate-180'"></ChevronDown
+			></CollapsibleTrigger>
+			<CollapsibleContent>
+				<div
+					v-for="feature in activeFeatures"
+					:key="feature.id"
+					class="my-1 flex items-start gap-2"
+				>
+					<svg class="mt-0.5 size-3.5">
+						<use href="#petal" :style="{ fill: `var(--${feature.id})` }"></use>
+					</svg>
+					<span>{{ feature.columnDef.header }} ({{ getMatchingRowCount(feature.id) }})</span>
+				</div></CollapsibleContent
 			>
 		</div>
-	</div>
+	</Collapsible>
 </template>