feat: update client navigation and first-leg orders

src/components/ClientSidebarMenuNode.vue

@@ -8,6 +8,7 @@ const props = defineProps<{
   activePath: string
   openedKeys: ReadonlySet<string>
   activeParentKeys: ReadonlySet<string>
+  level?: number
 }>()
 
 const emit = defineEmits<{
@@ -34,7 +35,7 @@ const groupId = computed(() => `client-nav-group-${props.node.key}`)
       :aria-controls="groupId"
       @click="emit('toggle', node.key)"
     >
-      <component :is="node.icon" :size="18" />
+      <component v-if="!level" :is="node.icon" :size="20" />
       <span>{{ node.title }}</span>
       <ChevronDown class="client-sidebar-group-chevron" :size="16" aria-hidden="true" />
     </button>
@@ -51,6 +52,7 @@ const groupId = computed(() => `client-nav-group-${props.node.key}`)
         :active-path="activePath"
         :opened-keys="openedKeys"
         :active-parent-keys="activeParentKeys"
+        :level="(level ?? 0) + 1"
         @navigate="emit('navigate', $event)"
         @toggle="emit('toggle', $event)"
       />
@@ -64,7 +66,7 @@ const groupId = computed(() => `client-nav-group-${props.node.key}`)
       :aria-current="node.path === activePath ? 'page' : undefined"
       @click="emit('navigate', node.path)"
     >
-      <component :is="node.icon" :size="18" />
+      <component v-if="!level" :is="node.icon" :size="20" />
       <span>{{ node.title }}</span>
     </RouterLink>
   </li>