feat: new docs ia (#29364)

New Docs IA, mainly splitting up the miscellaneous bucket that is Platform into multiple sections

apps/docs/components/Navigation/NavigationMenu/NavigationMenu.tsx

@@ -1,5 +1,6 @@
 import { memo } from 'react'
 
+import type { NavMenuSection } from '../Navigation.types'
 import NavigationMenuGuideList from './NavigationMenuGuideList'
 import NavigationMenuRefList from './NavigationMenuRefList'
 import { useCloseMenuOnRouteChange } from './NavigationMenu.utils'
@@ -15,10 +16,12 @@ enum MenuId {
   Storage = 'storage',
   Ai = 'ai',
   Platform = 'platform',
+  Deployment = 'deployment',
+  MonitoringTroubleshooting = 'monitoring_troubleshooting',
   Resources = 'resources',
   SelfHosting = 'self_hosting',
   Integrations = 'integrations',
-  Cli = 'supabase_cli',
+  LocalDevelopment = 'local_development',
   RefJavaScriptV1 = 'reference_javascript_v1',
   RefJavaScriptV2 = 'reference_javascript_v2',
   RefDartV1 = 'reference_dart_v1',
@@ -82,6 +85,10 @@ const menus: Menu[] = [
     id: MenuId.Functions,
     type: 'guide',
   },
+  {
+    id: MenuId.MonitoringTroubleshooting,
+    type: 'guide',
+  },
   {
     id: MenuId.Realtime,
     type: 'guide',
@@ -111,7 +118,11 @@ const menus: Menu[] = [
     type: 'guide',
   },
   {
-    id: MenuId.Cli,
+    id: MenuId.LocalDevelopment,
+    type: 'guide',
+  },
+  {
+    id: MenuId.Deployment,
     type: 'guide',
   },
   {
@@ -222,11 +233,11 @@ function getMenuById(id: MenuId) {
   return menus.find((menu) => menu.id === id)
 }
 
-function getMenuElement(menu: Menu | undefined) {
+function getMenuElement(menu: Menu | undefined, props?: any) {
   const menuType = menu?.type
   switch (menuType) {
     case 'guide':
-      return <NavigationMenuGuideList id={menu.id} />
+      return <NavigationMenuGuideList id={menu.id} {...props} />
     case 'reference':
       return (
         <NavigationMenuRefList
@@ -240,13 +251,19 @@ function getMenuElement(menu: Menu | undefined) {
   }
 }
 
-const NavigationMenu = ({ menuId }: { menuId: MenuId }) => {
+const NavigationMenu = ({
+  menuId,
+  additionalNavItems,
+}: {
+  menuId: MenuId
+  additionalNavItems?: Partial<NavMenuSection>[]
+}) => {
   const level = menuId
   const menu = getMenuById(level)
 
   useCloseMenuOnRouteChange()
 
-  return getMenuElement(menu)
+  return getMenuElement(menu, { additionalNavItems })
 }
 
 export { MenuId, getMenuById }