chore: initial commit

src/components/ClientSidebarMenu.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import ClientSidebarMenuNode from '@/components/ClientSidebarMenuNode.vue'
+import {
+  clientNavigation,
+  filterNavigationByPermissions,
+  getNavigationParentKeys,
+} from '@/navigation/clientNavigation'
+import { useAuthStore } from '@/stores/auth'
+
+const props = defineProps<{
+  activePath: string
+}>()
+
+const emit = defineEmits<{
+  navigate: [path: string]
+}>()
+const auth = useAuthStore()
+const visibleNavigation = computed(() => filterNavigationByPermissions(clientNavigation, auth.permissionCodes))
+
+const activeParentKeys = computed(() => new Set(getNavigationParentKeys(visibleNavigation.value, props.activePath)))
+const openedKeys = ref<ReadonlySet<string>>(new Set(activeParentKeys.value))
+
+function handleToggle(key: string) {
+  if (activeParentKeys.value.has(key)) return
+
+  const next = new Set(openedKeys.value)
+  if (next.has(key)) next.delete(key)
+  else next.add(key)
+  openedKeys.value = next
+}
+
+watch(
+  () => props.activePath,
+  () => {
+    openedKeys.value = new Set([...openedKeys.value, ...activeParentKeys.value])
+  },
+  { flush: 'sync' },
+)
+
+function handleSelect(path: string) {
+  emit('navigate', path)
+}
+</script>
+
+<template>
+  <ul class="client-nav-menu">
+    <ClientSidebarMenuNode
+      v-for="node in visibleNavigation"
+      :key="node.key"
+      :node="node"
+      :active-path="activePath"
+      :opened-keys="openedKeys"
+      :active-parent-keys="activeParentKeys"
+      @navigate="handleSelect"
+      @toggle="handleToggle"
+    />
+  </ul>
+</template>

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>