kind: Solution
version: v0

router:
  kind: Router
  routes:
    - frame: home-frame
      children:
        - frame: first
        - frame: second

frames:
  home-frame:
    kind: Frame
    layout:
      kind: ColumnLayout
      areas: [nav, outlet]
      widths: [300px, auto]
    contents:
      nav:
        kind: NavPanel
        orientation: vertical
        card: true
        type: button
        subscribe:
          - kind: RouterOutlet
            frame: home-frame
            source: outlet
        items:
          - kind: NavButton
            text: First frame
            frame: first
          - kind: NavButton
            text: Second frame
            frame: second
      outlet:
        kind: RouterOutlet
  first:
    kind: Frame
    layout:
      kind: RowLayout
      heights: [auto, 50px]
      areas: [main, button]
    contents:
      main:
        kind: ControlPanel
        controls:
          text:
            kind: Text
            text: This is the first frame
      button:
        kind: Button
        text: Next frame
        routerLink: /home-frame/second
  second:
    kind: Frame
    layout:
      kind: RowLayout
      heights: [auto, 50px]
      areas: [main, button]
    contents:
      main:
        kind: ControlPanel
        controls:
          text:
            kind: Text
            text: This is the second frame
      button:
        kind: Button
        text: Previous frame
        routerLink: /home-frame/first
