feat(v4): Auto-navigate to first menu item on group menu open(#10350)

Ensures users are seamlessly directed to the first available menu item upon opening a group, improving UX by reducing unnecessary clicks. This change enhances navigation flow within groups.

Co-authored-by: Pranav <pranavrajs@gmail.com>

app/javascript/dashboard/components-next/sidebar/SidebarGroup.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { computed, watch, ref } from 'vue';
 import { useSidebarContext } from './provider';
-import { useRoute } from 'vue-router';
+import { useRoute, useRouter } from 'vue-router';
 import Policy from 'dashboard/components/policy.vue';
 import SidebarGroupHeader from './SidebarGroupHeader.vue';
 import SidebarGroupLeaf from './SidebarGroupLeaf.vue';
@@ -41,7 +41,7 @@ const navigableChildren = computed(() => {
 });
 
 const route = useRoute();
-
+const router = useRouter();
 const isExpanded = computed(() => expandedItem.value === props.name);
 const isExpandable = computed(() => props.children);
 const hasChildren = computed(
@@ -53,10 +53,7 @@ const accessibleItems = computed(() => {
   return props.children.filter(child => isAllowed(child.to));
 });
 
-const hasAccessibleItems = computed(() => {
-  // default true so that rendering is not blocked
-  if (!hasChildren.value) return true;
-
+const hasAccessibleChildren = computed(() => {
   return accessibleItems.value.length > 0;
 });
 
@@ -93,6 +90,19 @@ const hasActiveChild = computed(() => {
   return activeChild.value !== undefined;
 });
 
+const toggleTrigger = () => {
+  if (
+    hasAccessibleChildren.value &&
+    !isExpanded.value &&
+    !hasActiveChild.value
+  ) {
+    // if not already expanded, navigate to the first child
+    const firstItem = accessibleItems.value[0];
+    router.push(firstItem.to);
+  }
+  setExpandedItem(props.name);
+};
+
 watch(expandedItem, locateLastChild, {
   immediate: true,
 });
@@ -101,7 +111,7 @@ watch(expandedItem, locateLastChild, {
 <!-- eslint-disable-next-line vue/no-root-v-if -->
 <template>
   <Policy
-    v-if="hasAccessibleItems"
+    v-if="!hasChildren || hasAccessibleChildren"
     :permissions="resolvePermissions(to)"
     :feature-flag="resolveFeatureFlag(to)"
     as="li"
@@ -116,7 +126,7 @@ watch(expandedItem, locateLastChild, {
       :has-active-child="hasActiveChild"
       :expandable="hasChildren"
       :is-expanded="isExpanded"
-      @toggle="setExpandedItem(name)"
+      @toggle="toggleTrigger"
     />
     <ul
       v-if="hasChildren"