fix: synchronize responsive navigation and soundtrack cue

src/components/SiteNavigation.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { onMounted, ref } from 'vue';
-import type { SectionId } from '@/content/types';
-import type { JourneySnapshot } from '@/journey/types';
+import { onBeforeUnmount, onMounted, ref } from "vue";
+import type { SectionId } from "@/content/types";
+import type { JourneySnapshot } from "@/journey/types";
 
 const props = defineProps<{
   items: ReadonlyArray<{ id: SectionId; label: string }>;
@@ -10,25 +10,41 @@ const props = defineProps<{
 }>();
 
 const navigationLabels: Readonly<Record<SectionId, string>> = {
-  start: 'Start',
-  profile: 'Profile',
-  experience: 'Career',
-  infrastructure: 'Infra',
-  'selected-builds': 'Builds',
-  'additional-work': 'More work',
-  toolkit: 'Toolkit',
-  contact: 'Contact',
+  start: "Start",
+  profile: "Profile",
+  experience: "Career",
+  infrastructure: "Infra",
+  "selected-builds": "Builds",
+  "additional-work": "More work",
+  toolkit: "Toolkit",
+  contact: "Contact",
 };
 
 const disclosure = ref<HTMLDetailsElement | null>(null);
+let compactQuery: MediaQueryList | null = null;
+
+const syncDisclosureToViewport = ({
+  matches,
+}: Pick<MediaQueryList, "matches">): void => {
+  if (matches) disclosure.value?.removeAttribute("open");
+  else disclosure.value?.setAttribute("open", "");
+};
 
 onMounted(() => {
-  if (window.matchMedia('(max-width: 767px)').matches) disclosure.value?.removeAttribute('open');
+  compactQuery = window.matchMedia("(max-width: 767px)");
+  syncDisclosureToViewport(compactQuery);
+  compactQuery.addEventListener("change", syncDisclosureToViewport);
+});
+
+onBeforeUnmount(() => {
+  compactQuery?.removeEventListener("change", syncDisclosureToViewport);
+  compactQuery = null;
 });
 
 const navigate = (event: MouseEvent): void => {
   props.onSectionLinkClick(event);
-  if (window.matchMedia('(max-width: 767px)').matches) disclosure.value?.removeAttribute('open');
+  if (window.matchMedia("(max-width: 767px)").matches)
+    disclosure.value?.removeAttribute("open");
 };
 </script>