1

src/App.vue

@@ -1,7 +1,11 @@
 <template>
   <a-layout class="h-full">
     <a-layout-sider>
-      <a-menu class="h-full" :items="menuItems" @click="actionMenuItemClick"></a-menu>
+      <a-menu class="h-full" 
+        v-model:selectedKeys="menuSelectedKeys"
+        :items="menuItems" 
+        @click="actionMenuItemClick"
+      ></a-menu>
     </a-layout-sider>
     <a-layout>
       <a-layout-content>
@@ -22,6 +26,8 @@ import ApiClient from '@/utils/ApiClient';
 import ServiceConfiguration from './components/ServiceConfiguration.vue';
 // service menu items
 const menuItems = ref([]);
+/** @var {Array} */
+const menuSelectedKeys = ref([]);
 /** @var {string} */
 const activeServiceKey = ref(null);
 /** @var {Boolean} */
@@ -40,6 +46,8 @@ async function mounted() {
         menuItems.value.push({id:item.key, key:item.key, label:item.name, order:item.order});
     }
     menuItems.value.sort((a,b) => a.order - b.order);
+    activeServiceKey.value = menuItems.value[0].key;
+    menuSelectedKeys.value.push(activeServiceKey.value);
 }
 
 // handle menu item click