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>