feat: Add support for displaying operationId in the sidebar (#1927)

* feat: Add support for displaying id in the sidebar

* fix: previous commit `feat: Add support for displaying id in the sidebar`

Co-authored-by: Oprysk <vyacheslav@redocly.com>

README.md

@@ -246,6 +246,7 @@ You can use all of the following options with the standalone version of the <red
 * `sideNavStyle` - can be specified in various ways:
   * **summary-only**: displays a summary in the sidebar navigation item. (**default**)
   * **path-only**: displays a path in the sidebar navigation item.
+  * **id-only**: displays the operation id with a fallback to the path in the sidebar navigation item.
 
 ### `<redoc>` theme object
 * `spacing`

src/services/RedocNormalizedOptions.ts

@@ -8,6 +8,7 @@ import { MDXComponentMeta } from './MarkdownRenderer';
 export enum SideNavStyleEnum {
   SummaryOnly = 'summary-only',
   PathOnly = 'path-only',
+  IdOnly = 'id-only',
 }
 
 export interface RedocRawOptions {
@@ -170,6 +171,8 @@ export class RedocNormalizedOptions {
         return value;
       case SideNavStyleEnum.PathOnly:
         return SideNavStyleEnum.PathOnly;
+      case SideNavStyleEnum.IdOnly:
+        return SideNavStyleEnum.IdOnly;
       default:
         return defaultValue;
     }

src/services/models/Operation.ts

@@ -106,7 +106,12 @@ export class OperationModel implements IMenuItem {
 
     this.name = getOperationSummary(operationSpec);
 
-    this.sidebarLabel = options.sideNavStyle === SideNavStyleEnum.PathOnly ? this.path : this.name;
+    this.sidebarLabel =
+      options.sideNavStyle === SideNavStyleEnum.IdOnly
+        ? this.operationId || this.path
+        : options.sideNavStyle === SideNavStyleEnum.PathOnly
+        ? this.path
+        : this.name;
 
     if (this.isCallback) {
       // NOTE: Callbacks by default should not inherit the specification's global `security` definition.