WIP - some fixes

frontend/components/AppSidebar.vue

@@ -27,16 +27,8 @@ const handleLogout = async () => {
 }
 
 // Check if user is central admin (by checking if we're on a central subdomain)
-const isCentralAdmin = computed(() => {
-  if (process.client) {
-    const hostname = window.location.hostname
-    const parts = hostname.split('.')
-    const subdomain = parts.length >= 2 ? parts[0] : null
-    const centralSubdomains = ['central', 'admin']
-    return subdomain && centralSubdomains.includes(subdomain)
-  }
-  return false
-})
+// Use ref instead of computed to avoid hydration mismatch
+const isCentralAdmin = ref(false)
 
 // Fetch objects and group by app
 const apps = ref<any[]>([])
@@ -44,6 +36,15 @@ const topLevelObjects = ref<any[]>([])
 const loading = ref(true)
 
 onMounted(async () => {
+  // Set isCentralAdmin first
+  if (process.client) {
+    const hostname = window.location.hostname
+    const parts = hostname.split('.')
+    const subdomain = parts.length >= 2 ? parts[0] : null
+    const centralSubdomains = ['central', 'admin']
+    isCentralAdmin.value = subdomain ? centralSubdomains.includes(subdomain) : false
+  }
+
   // Don't fetch tenant objects if we're on a central subdomain
   if (isCentralAdmin.value) {
     loading.value = false
@@ -108,7 +109,16 @@ const staticMenuItems = [
   },
 ]
 
-const centralAdminMenuItems = [
+const centralAdminMenuItems: Array<{
+  title: string
+  icon: any
+  url?: string
+  items?: Array<{
+    title: string
+    url: string
+    icon: any
+  }>
+}> = [
   {
     title: 'Central Admin',
     icon: Settings,
@@ -219,7 +229,7 @@ const centralAdminMenuItems = [
               </SidebarMenuItem>
 
               <!-- Collapsible menu item with submenu -->
-              <Collapsible v-else as-child :default-open="true" class="group/collapsible">
+              <Collapsible v-else-if="item.items" as-child :default-open="true" class="group/collapsible">
                 <SidebarMenuItem>
                   <CollapsibleTrigger as-child>
                     <SidebarMenuButton :tooltip="item.title">