navPanelConfig

Examples

# === Nav panel with buttons ===
kind: NavPanel
orientation: vertical
card: true
type: button
items:
  - kind: NavButton
    frame: my-other-frame1
    text: Page 1
  - kind: NavButton
    frame: my-other-frame2
    text: Page 2
subscribe:
  kind: RouterOutlet
  frame: my-home-frame
  source: my-router-outlet

# === Nav panel with icons ===
kind: NavPanel
orientation: vertical
card: true
type: icon
items:
  - kind: NavIcon
    frame: my-other-frame1
    icon: 
      kind: Icon
      icon: fas-arrow-up
  - kind: NavIcon
    frame: my-other-frame2
    icon:
      kind: Icon
      icon: fas-arrow-down    
subscribe: 
  kind: RouterOutlet
  frame: my-home-frame
  source: my-router-outlet

# === Nav panel with numbers ===
kind: NavPanel
orientation: vertical
card: true
type: number
items:
  - kind: NavNumber
    frame: my-other-frame1
    number: 1
  - kind: NavNumber
    frame: my-other-frame2
    number: 2
subscribe: 
  kind: RouterOutlet
  frame: my-home-frame
  source: my-router-outlet

Object information

• A NavPanel allows users to change navigate between routes
• Union of the following types:
  • One of the following types:
    • Object with the following properties:
      • type (required): Constant button
        • The type of the nav, can be either a button, an icon, or a number
      • items (required):
        • A list of items to display in the nav
        • Array of:
          • One of the following types:
            • Object navButton
            • Object text
    • Object with the following properties:
      • type (required): Constant icon
        • The type of the nav, can be either a button, an icon, or a number
      • items (required):
        • A list of items to display in the nav
        • Array of:
          • One of the following types:
            • Object navIcon
            • Object text
    • Object with the following properties:
      • type (required): Constant number
        • The type of the nav, can be either a button, an icon, or a number
      • items (required):
        • A list of items to display in the nav
        • Array of:
          • One of the following types:
            • Object navNumber
            • Object text
  • Object with the following properties:
    • kind (required): Constant NavPanel
      • NavPanel allows users to change navigate between routes
    • orientation (required):
      • The orientation of the nav, horizontal for side nav, vertical for top nav
      • One of the following types:
        • Constant vertical
        • Constant horizontal
    • card (optional): boolean
      • Card is used to display items in a way that is easily readable
    • brand (optional):
      • Display a brand in the nav using either a text or (asset) image
      • One of the following types:
        • Object navTextBrand
        • Object navImageBrand
    • subscribe (optional):
      • Subscribe to one or more sources
      • Array of:
        • Object navPanelRouterOutletSubscribe