chore: initial commit

src/components/ClientSidebarMenuNode.vue

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { ChevronDown } from '@lucide/vue'
+import type { ClientNavigationNode } from '@/navigation/clientNavigation'
+
+const props = defineProps<{
+  node: ClientNavigationNode
+  activePath: string
+  openedKeys: ReadonlySet<string>
+  activeParentKeys: ReadonlySet<string>
+}>()
+
+const emit = defineEmits<{
+  navigate: [path: string]
+  toggle: [key: string]
+}>()
+
+const groupId = computed(() => `client-nav-group-${props.node.key}`)
+</script>
+
+<template>
+  <li
+    class="client-nav-node"
+    v-if="node.children"
+    :class="{ 'is-active-parent': activeParentKeys.has(node.key) }"
+  >
+    <button
+      type="button"
+      class="client-sidebar-group-trigger"
+      :aria-expanded="openedKeys.has(node.key)"
+      :aria-controls="groupId"
+      @click="emit('toggle', node.key)"
+    >
+      <component :is="node.icon" :size="18" />
+      <span>{{ node.title }}</span>
+      <ChevronDown class="client-sidebar-group-chevron" :size="16" aria-hidden="true" />
+    </button>
+
+    <ul
+      v-show="openedKeys.has(node.key)"
+      :id="groupId"
+      class="client-nav-submenu"
+    >
+      <ClientSidebarMenuNode
+        v-for="child in node.children"
+        :key="child.key"
+        :node="child"
+        :active-path="activePath"
+        :opened-keys="openedKeys"
+        :active-parent-keys="activeParentKeys"
+        @navigate="emit('navigate', $event)"
+        @toggle="emit('toggle', $event)"
+      />
+    </ul>
+  </li>
+
+  <li v-else class="client-nav-node">
+    <RouterLink
+      :to="node.path"
+      class="client-sidebar-link"
+      :aria-current="node.path === activePath ? 'page' : undefined"
+      @click="emit('navigate', node.path)"
+    >
+      <component :is="node.icon" :size="18" />
+      <span>{{ node.title }}</span>
+    </RouterLink>
+  </li>
+</template>