2c. LeftNavSidecar View

The LeftNavSidecar is a Sidecar variant that optimizes layout for a hierarchical presentation. It allows commands to fetch data, parcel the data into one or more menus, and then pass this model on for subsequent rendering in the LeftNavSidecar view.

• Basic Layout
• Commands Response

Basic Layout

The UI of LeftNavSidecar is divided into four areas:

• Title Bar: Displays the title of a command response with breadcrumb navigation - signifying where the current response is within a hierachical context.
• Menus: Each menu contains one or items, associating with a menu title for you to switch between different contexts.
• Content: The main area to view the content of each menu item.
• Links: Links to related commands, or external page.

Command Response

When a command execution completes, Kui will broadcast an event that signifies and describes the command response. The LeftNavSidecar listens for command responses of type NavResponse, and renders them.

Coming Soon: Using the Kui EventBus

Example of NavResponse

import { NavResponse } from '@kui-shell/core'

/** A no-argument Command Handler */
function printCatInLeftNavSidecar(): NavResponse {
  apiVersion: 'kui-shell/v1',
  kind: 'NavResponse',
  breadcrumbs: [{ label: 'Animal' }, { label: 'cat', command: 'hello cat' }], // shown in image labeled A
  menus:[
    {
      label: 'Sweet', // shown in E
      items: [
        {
          mode: '😻', // show in F
          content: '### Hello!\n ...', // shown in C
          contentType: 'text/markdown'
        },
        {
          mode: '😺',
          react: reactContent()
        }
      ]
    },
    {
      label: 'Crazy',
      items: [
        {
          mode: '🙀',
          content: 'kind: Aerican Shorthair\nmetadata:...',
          contentType: 'yaml'
        },
        {
          mode: '🙀',
          react: reactContent()
        }
      ]
    }
  ],
  links: [
    { label: 'See 🐶', command: 'hello dog' },
    { label: 'Buy 🧀', href: 'https://github.com/IBM/kui' }
  ]
}

In this example code, printCatInLeftNavSidecar is a Kui Command Handler that happens to take no arguments. For more information on Command Handlers, how they can consume required and optional parameters, and how to link your handler to a particular command-line string, consult the Kui Command Documentation.