feat: compose the portfolio journey layer

src/components/SiteNavigation.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import type { SectionId } from "@/content/types";
+import { onMounted, ref } from 'vue';
+import type { SectionId } from '@/content/types';
 import type { JourneySnapshot } from '@/journey/types';
 
 const props = defineProps<{
@@ -18,21 +19,35 @@ const navigationLabels: Readonly<Record<SectionId, string>> = {
   toolkit: 'Toolkit',
   contact: 'Contact',
 };
+
+const disclosure = ref<HTMLDetailsElement | null>(null);
+
+onMounted(() => {
+  if (window.matchMedia('(max-width: 767px)').matches) disclosure.value?.removeAttribute('open');
+});
+
+const navigate = (event: MouseEvent): void => {
+  props.onSectionLinkClick(event);
+  if (window.matchMedia('(max-width: 767px)').matches) disclosure.value?.removeAttribute('open');
+};
 </script>
 
 <template>
   <nav class="site-navigation" aria-label="Portfolio sections">
-    <ul>
-      <li v-for="item in items" :key="item.id">
-        <a
-          :href="`#${item.id}`"
-          :aria-current="
-            props.journey.activeSectionId === item.id ? 'page' : undefined
-          "
-          @click="props.onSectionLinkClick"
-          >{{ navigationLabels[item.id] }}</a
-        >
-      </li>
-    </ul>
+    <details ref="disclosure" class="site-navigation__disclosure" open>
+      <summary>Navigate</summary>
+      <ul>
+        <li v-for="item in items" :key="item.id">
+          <a
+            :href="`#${item.id}`"
+            :aria-current="
+              props.journey.activeSectionId === item.id ? 'page' : undefined
+            "
+            @click="navigate"
+            >{{ navigationLabels[item.id] }}</a
+          >
+        </li>
+      </ul>
+    </details>
   </nav>
 </template>