Navigation List in VBCS

Content

I tried to do the navigation list example using below URL , it is not working. can you guide what is missing...

https://blogs.oracle.com/vbcs/adding-a-navigation-bar-to-a-vbcs-application

1.  for oj-navigation list defined as on-selection-changed="[[$listeners.ojNavigationListSelection]]" selection="[[$page.currentFlow]]"

2.  defined a custom event ojNavigationListSelection

3. defined custom event listener on the above event  -  Action chain like below 

      "actions": {

        "if": {

          "module": "vb/action/builtin/ifAction",

          "parameters": {

            "condition": "{{ $chain.variables.navigate }}"

          },

          "outcomes": {

            "true": "navigateToVariablesPage"

          }

        },

        "navigateToVariablesPage": {

          "module": "vb/action/builtin/navigateToPageAction",

          "parameters": {

            "history": "push",

            "page": "[[$variables.page]]"

4. Input params to action chain as - screen shots attached

 

5. Also, navigation is coming on top, what needs to be done to come on the left side menu....