fix(app-sidebar): mobile check [khcp-17790] (#2521)

Fix the mobile check for autoexpand of groups.
Part of [KHCP-17790](https://konghq.atlassian.net/browse/KHCP-17790).

Author: kaiarrowood

packages/core/app-layout/src/components/sidebar/AppSidebar.vue

@@ -298,6 +298,7 @@ const topNavGroups = computed((): Map<string, SidebarPrimaryItem[]> => {
   return groups
 })
 
+const isMobile = useMediaQuery(`max-width: ${KUI_BREAKPOINT_MOBILE}`)
 const getGroupConfig = (groupName: string = ''): GroupConfig | null => {
   if (groupName === UNGROUPED_NAME || !groupName.trim()) {
     return null
@@ -487,9 +488,9 @@ onMounted(async () => {
   window.addEventListener('resize', disableTransitions)
 
   if (props.groupConfig) {
-    for (const groupName in props.groupConfig) {
-      // auto-expand all groups if the user is on mobile
-      if (useMediaQuery(`(max-width: ${KUI_BREAKPOINT_MOBILE})`)) {
+    // auto-expand all groups if the user is on mobile
+    if (isMobile.value) {
+      for (const groupName in props.groupConfig) {
         const group = props.groupConfig[groupName]
         group.collapsed = false
       }
@@ -506,6 +507,10 @@ onBeforeUnmount(() => {
   window.removeEventListener('resize', debouncedResizeHandler)
   window.removeEventListener('resize', disableTransitions)
 })
+
+watch(() => props.groupConfig, (newConfig) => {
+  console.log('groupConfig updated', newConfig)
+})
 </script>
 
 <style lang="scss" scoped>