nav-menu: rename side nav references

app/app-services.ts

@@ -57,7 +57,7 @@ export { MetricsService } from 'services/metrics';
 export { HighlighterService } from 'services/highlighter';
 export { DiagnosticsService } from 'services/diagnostics';
 export { RecordingModeService } from 'services/recording-mode';
-export { SideNavService } from 'services/side-nav';
+export { NavMenuService } from 'services/nav-menu';
 export { VideoSettingsService } from 'services/settings-v2/video';
 export { SettingsManagerService } from 'services/settings-manager';
 export { MarkersService } from 'services/markers';
@@ -189,7 +189,7 @@ import { OverlaysPersistenceService } from 'services/scene-collections/overlays'
 import { PlatformAppStoreService } from 'services/platform-app-store';
 import { GameOverlayService } from 'services/game-overlay';
 import { GuestCamService } from 'services/guest-cam';
-import { SideNavService } from './services/side-nav';
+import { NavMenuService } from './services/nav-menu';
 import { VideoSettingsService } from 'services/settings-v2/video';
 import { SettingsManagerService } from 'services/settings-manager';
 import { DualOutputService } from 'services/dual-output';
@@ -284,7 +284,7 @@ export const AppServices = {
   GameOverlayService,
   GuestCamService,
   HardwareService,
-  SideNavService,
+  NavMenuService,
   VideoSettingsService,
   SettingsManagerService,
   DualOutputService,

app/app.g.less

@@ -457,14 +457,14 @@ select {
   opacity: 0;
 }
 
-.sidenav-slide-enter,
-.sidenav-slide-leave-to {
+.nav-menu-slide-enter,
+.nav-menu-slide-leave-to {
   transform: translateY(-20px);
   opacity: 0;
 }
 
-.sidenav-slide-enter-active,
-.sidenav-slide-leave-active {
+.nav-menu-slide-enter-active,
+.nav-menu-slide-leave-active {
   transition: all 0.3s ease;
 }
 
@@ -519,4 +519,4 @@ select {
 
 .toast-action {
   color: var(--white) !important;
-}
+}

app/components-react/hooks/useAgentAppInstalled.ts

@@ -1,8 +1,8 @@
 import { useEffect } from 'react';
 import { useVuex } from 'components-react/hooks';
 import { Services } from 'components-react/service-provider';
-import { EMenuItemKey } from 'services/side-nav';
 import { getOS, OS } from 'util/operating-systems';
+import { ENavMenuKey } from 'services/nav-menu';
 
 export const AGENT_APP_STORE_ID = '7643';
 export const AGENT_APP_ID = '93125d1c33';
@@ -20,7 +20,7 @@ export const AGENT_APP_ID = '93125d1c33';
  * or enabled anywhere, without needing to remount.
  */
 export function useAgentAppInstalled() {
-  const { NavigationService, PlatformAppsService, SideNavService } = Services;
+  const { NavigationService, PlatformAppsService } = Services;
 
   useEffect(() => {
     if (getOS() !== OS.Windows) return;
@@ -37,8 +37,11 @@ export function useAgentAppInstalled() {
 
   async function installAgent() {
     await PlatformAppsService.actions.return.refreshProductionApps();
-    NavigationService.actions.navigate('PlatformAppStore', { appId: AGENT_APP_STORE_ID });
-    SideNavService.actions.setCurrentMenuItem(EMenuItemKey.AppStore);
+    NavigationService.actions.navigate(
+      'PlatformAppStore',
+      { appId: AGENT_APP_STORE_ID },
+      ENavMenuKey.AppStore,
+    );
   }
 
   function enableAgent() {

app/components-react/index.ts

@@ -27,7 +27,7 @@ import BrowserView from './shared/BrowserView';
 import MediaGallery from './windows/MediaGallery';
 import Projector from './windows/Projector';
 import AddSource from './windows/AddSource';
-import SideNav from './sidebar/SideNav';
+import NavMenu from './nav-menu/NavMenu';
 import WelcomeToPrime from './windows/WelcomeToPrime';
 import Notifications from './windows/notifications/Notifications';
 import NotificationsAndNews from './windows/notifications';
@@ -82,7 +82,7 @@ export const components = {
   MediaGallery,
   AddSource,
   RecentEventsWindow,
-  SideNav,
+  NavMenu,
   WelcomeToPrime,
   Notifications,
   NotificationsAndNews,

app/components-react/sidebar/AppsNav.tsx → app/components-react/nav-menu/AppsNav.tsx

@@ -1,19 +1,19 @@
 import React, { memo } from 'react';
-import styles from './SideNav.m.less';
+import styles from './NavMenu.m.less';
 import { useVuex } from 'components-react/hooks';
 import { $t } from 'services/i18n';
 import { Services } from 'components-react/service-provider';
 import MenuItem from 'components-react/shared/MenuItem';
 import { EAppPageSlot, ILoadedApp } from 'services/platform-apps';
 import { Menu } from 'util/menus/Menu';
 import cx from 'classnames';
-import { EMenuItemKey } from 'services/side-nav';
+import { ENavMenuFeatures } from 'services/nav-menu';
 interface IAppsNav {
   type?: 'enabled' | 'selected';
 }
 
 export default memo(function AppsNav(p: IAppsNav) {
-  const { NavigationService, PlatformAppsService, SideNavService, HighlighterService } = Services;
+  const { NavigationService, PlatformAppsService, NavMenuService, HighlighterService } = Services;
   const { type = 'selected' } = p;
 
   const aiHighlighterApp: ILoadedApp = {
@@ -45,9 +45,9 @@ export default memo(function AppsNav(p: IAppsNav) {
   };
 
   const { currentMenuItem, apps, isOpen, navigateApp, enabledApps } = useVuex(() => ({
-    currentMenuItem: SideNavService.views.currentMenuItem,
-    apps: SideNavService.views.apps,
-    isOpen: SideNavService.views.isOpen,
+    currentMenuItem: NavMenuService.views.currentMenuItem,
+    apps: NavMenuService.views.apps,
+    isOpen: NavMenuService.views.isOpen,
     navigateApp: NavigationService.actions.navigateApp,
     enabledApps: (HighlighterService.views.highlighterVersion !== ''
       ? [...PlatformAppsService.views.enabledApps, aiHighlighterApp]
@@ -146,7 +146,7 @@ export default memo(function AppsNav(p: IAppsNav) {
                   NavigationService.navigate(
                     'Highlighter',
                     { view: 'settings' },
-                    EMenuItemKey.Highlighter,
+                    ENavMenuFeatures.Highlighter,
                   );
                 } else {
                   app?.id && navigateApp(app?.id, `sub-${app?.id}`);

app/components-react/sidebar/EditorTabs.tsx → app/components-react/nav-menu/EditorTabs.tsx

@@ -1,18 +1,18 @@
 import React, { useMemo } from 'react';
 import { Services } from 'components-react/service-provider';
-import styles from './SideNav.m.less';
+import styles from './NavMenu.m.less';
 import MenuItem from 'components-react/shared/MenuItem';
 import { useVuex } from 'components-react/hooks';
 import cx from 'classnames';
-import { EMenuItemKey, ENavName } from 'services/side-nav';
+import { ENavMenuKey, ENavName } from 'services/nav-menu';
 import { $t } from 'services/i18n';
 
 interface IEditorTabs {
   type?: 'root' | 'submenu';
 }
 
 export default function EditorTabs(p: IEditorTabs) {
-  const { NavigationService, SideNavService, LayoutService } = Services;
+  const { NavigationService, NavMenuService, LayoutService } = Services;
   const { type = 'root' } = p;
 
   const defaultTitle = $t('Editor');
@@ -27,17 +27,17 @@ export default function EditorTabs(p: IEditorTabs) {
     editorToggled,
   } = useVuex(() => ({
     currentMenuItem:
-      SideNavService.views.currentMenuItem === 'editor'
+      NavMenuService.views.currentMenuItem === 'editor'
         ? 'default'
-        : SideNavService.views.currentMenuItem,
-    setCurrentMenuItem: SideNavService.actions.setCurrentMenuItem,
+        : NavMenuService.views.currentMenuItem,
+    setCurrentMenuItem: NavMenuService.actions.setCurrentMenuItem,
     studioTabs: LayoutService.views.studioTabs,
-    compactView: SideNavService.views.compactView,
-    isOpen: SideNavService.views.isOpen,
-    showCustomEditor: SideNavService.views.showCustomEditor,
-    toggleSidebarSubmenu: SideNavService.actions.toggleSidebarSubmenu,
-    toggleMenuItem: SideNavService.actions.toggleMenuItem,
-    editorToggled: SideNavService.views.getMenuItemData(ENavName.TopNav, EMenuItemKey.Editor)
+    compactView: NavMenuService.views.compactView,
+    isOpen: NavMenuService.views.isOpen,
+    showCustomEditor: NavMenuService.views.showCustomEditor,
+    toggleSidebarSubmenu: NavMenuService.actions.toggleSidebarSubmenu,
+    toggleMenuItem: NavMenuService.actions.toggleMenuItem,
+    editorToggled: NavMenuService.views.getMenuItemData(ENavName.FeaturesNav, ENavMenuKey.Editor)
       ?.isActive,
   }));
 
@@ -52,7 +52,7 @@ export default function EditorTabs(p: IEditorTabs) {
       if (tabId !== 'default' && !showCustomEditor) {
         toggleSidebarSubmenu(true);
       } else if (tabId === 'default' && !editorToggled && isOpen) {
-        toggleMenuItem(ENavName.TopNav, EMenuItemKey.Editor, true);
+        toggleMenuItem(ENavName.FeaturesNav, ENavMenuKey.Editor, true);
       }
     }
   }
@@ -61,7 +61,7 @@ export default function EditorTabs(p: IEditorTabs) {
     return editorToggled ? studioTabs : studioTabs.filter(tab => tab.key !== 'default');
   }, [editorToggled, studioTabs]);
 
-  // if closed, show editor tabs in sidenav when tab is toggled on
+  // if closed, show editor tabs in nav menu when tab is toggled on
   // show all editor tabs in submenu
   // don't translate tab title because the user has set it
   return type === 'root' ? (
@@ -71,7 +71,7 @@ export default function EditorTabs(p: IEditorTabs) {
           key={tab.key}
           className={cx(
             !isOpen && styles.closed,
-            (currentMenuItem === EMenuItemKey.Editor ||
+            (currentMenuItem === ENavMenuKey.Editor ||
               currentMenuItem === tab.key ||
               currentMenuItem === `sub-${tab.key}`) &&
               styles.active,