Use pinia

app/components/sidebar/container.vue

@@ -0,0 +1,49 @@
+<template>
+    <div id="lineSelector">
+        <div
+            v-for="route of store.routes"
+            :key="route.id"
+            :class="{
+                selected: selectedRoutesId.includes(route.id),
+                lineLabel: true,
+            }"
+            :style="{
+                background: '#' + route.color,
+                color: '#' + route.textColor,
+            }"
+            @click="selectRoute(route.id)"
+        >
+            {{ route.type }} : {{ route.shortName }}
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+const store = useMresoStore();
+
+const { selectedRoutesId } = defineProps<{
+    selectedRoutesId: string[];
+}>();
+
+function selectRoute(routeId: string) {
+    navigateTo(`/lines/${routeId}`);
+}
+</script>
+
+<style scoped lang="css">
+#lineSelector {
+    position: fixed;
+    left: 0;
+    top: 0;
+    height: 100vh;
+    overflow: auto;
+    background: white;
+}
+
+.lineLabel {
+    cursor: pointer;
+}
+.lineLabel.selected {
+    color: red !important;
+}
+</style>