Optima: Nav: mobile App name support

src/common/app.nav.ts

@@ -44,6 +44,7 @@ interface ItemBase {
 
 export interface NavItemApp extends ItemBase {
   type: 'app',
+  mobileName?: string,
   route: string,
   landingRoute?: string,  // specify a different route than the nextjs page router route, to land to
   barTitle?: string,      // set to override the name as the bar title (unless custom bar content is used)

src/common/layout/optima/nav/MobileNav.tsx

@@ -35,7 +35,7 @@ export function MobileNav(props: {
         return (
           <MobileNavIcon
             key={'n-m-' + app.route.slice(1)}
-            aria-label={app.name}
+            aria-label={app.mobileName || app.name}
             variant={isActive ? 'solid' : undefined}
             onClick={() => Router.push(app.landingRoute || app.route)}
             className={`${mobileNavItemClasses.typeApp} ${isActive ? mobileNavItemClasses.active : ''}`}

src/common/layout/optima/nav/MobileNavItems.tsx

@@ -56,14 +56,14 @@ export function MobileNavItems(props: { currentApp?: NavItemApp }) {
           const isActive = app === props.currentApp;
           return (
             <Button
-              key={'app-' + app.name}
+              key={'app-' + (app.mobileName || app.name)}
               size='sm'
               variant={isActive ? 'solid' : undefined}
               onClick={() => Router.push(app.landingRoute || app.route)}
               sx={{ flexDirection: 'column', gap: 0, minWidth: 80, py: 1 }}
               startDecorator={(isActive && app.iconActive) ? <app.iconActive /> : <app.icon />}
             >
-              {app.name}
+              {app.mobileName || app.name}
             </Button>
           );
         })}