# Navigation

## Navigation Element

{
  "key": "nearest-atm",
  "priority": 1010,
  "display": [
    {
      "language": "tr",
      "title": "En Yakin ATM",
      "hint": "En yakin ATM noktasina ulasin",
      "icon": "urn:images:shared:icon:atm"
    },
    {
      "language": "en",
      "title": "Nearest ATM",
      "hint": "Find nearest ATM for your cash requirements",
      "icon": "urn:images:shared:icon:atm"
    }
  ],
  "action": "urn:page:WidgetATMLocator",
  "navigation-path": "nearest-atm",
  "audience": [
    "NL",
    "1FA"
  ],
  "is-new": false,
  "parameters": [
    {
      "source": "storage:claim.user",
      "as": "user"
    }
  ]
}

* **Key**: Unique identifier for each menu element.
* **Display**: It contains visual and multilingual support for each menu element and the appearance information that the end user will see.
* **language**: The language must comply with the ISO 639-1 standard.
* **icon**: Icons must be formatted as urn schema(urn:image:...). Images can be stored in the app or retrieved from cdn source.
* **Action**: The action defines what triggers when the user clicks on the menu element. Actions must be formatted as urn schema(urn:action:...).There are two options for actions;
* **urn:page:<widget-name>**: This action instantiates the widget and passes requested parameters to the widget
* **urn:transaction:<transaction-name>**:This action triggers the transaction and passes requested parameters to the widget or form.
* **Navigation-Path**: deeplink operation find navigation-path and control by audience to navigate wanted page;
* **Audience**: The audience includes target audiences to decide menu element visibility. Available options are;
* **NL**: Not logged
* **1FA**: The customer has logged in at least once and is not actively logged in.
* **2FA**: The customer has logged in at least once and is actively logged in.
* **Parameters**: Required parameters for action. "as" parameter in model is used as transition's dataKey. Available options for "source" parameter are;
* **cache:<parameter name with page prefix>**: Reads the requested parameter from cache parameter manager
* Example: "source": "urn:cache:home:Iban"
* **storage:<secure storage key>**: Reads the requested parameter from secure storage parameter manager
* Example: "source": "urn:storage:claim.user"

:::warning
Consider;
Can action urns be used for deep linking and navigation ?
:::

### Dynamic Evaluation
In some cases, the visibility of the navigation element can be changed depending on the parameters. Particularly in context menus, the visibility of navigation elements varies depending on the context parameters.

With **filter** configuration, the visibility of the navigation element can be changed on the client side, depending on the parameters provided.

* **Type** is enum value and configures visibility of item when expression is false.
* "visible" : The value means that the navigation element will not be shown when the expression is false.
* "disable" : The value means that the navigation element will be disabled when the expression is false.
* **Expression** is simple filter controlling script expression.
* *Check this package :* https://pub.dev/packages/expressions

{
  "key": "fx-buy-context",
  "priority": 1100,
  "display": [
    {
      "language": "tr",
      "title": "Doviz Al",
      "icon": "urn:images:shared:icon:fx:buy"
    },
    {
      "language": "en",
      "title": "Nearest ATM",
      "icon": "urn:images:shared:icon:fx:buy"
    }
  ],
  "action": "urn:transaction:fx:buy",
  "audience": [
    "2FA"
  ],
  "is-new": false,
  "filter": {
    "type": "visible",
    "expression": "balance > 0 && currency == 'TRL'"
  },
  "parameters": [
    {
      "source": "active-account.available-balance",
      "as": "balance"
    },
    {
      "source": "active-account.currency",
      "as": "currency"
    }
  ]
}

## Navigation Groups

Navigation elements can be grouped for use in side navigation, pre-login navigation, as well as context-based navigation.

A navigation group can be created as a side menu, a button context menu, and a placeholder widget in the user interface.

[
  {
    "key": "pre-login",
    "items": [
      {
        "key": "become-customer",
        "audience": [
          "NL"
        ],
        ...
      },
      {
        "key": "atm-locator",
        "audience": [
          "NL",
          "1FA",
          "2FA"
        ],
        ...
      },
      {
        "key": "card-activator",
        "audience": [
          "1FA"
        ],
        ...
      }
    ]
  },
  {
    "key": "side-navigation",
    "items": [
      {
        "key": "accounts",
        "priority": 1100,
        ...
      },
      {
        "key": "transfers",
        "priority": 1200,
        ...
      },
      {
        "key": "fx",
        "priority": 1300,
        ...
      },
      {
        "key": "investment",
        "priority": 1400,
        ...
      }
    ]
  },
  {
    "key": "account-context",
    "items": [
      {
        "key": "transaction",
        ...
      },
      {
        "key": "fx-buy",
        ...
      },
      {
        "key": "fx-sell",
        ...
      },
      {
        "key": "transfer-trl",
        ...
      },
      {
        "key": "transfer-swift",
        ...
      }
    ]
  }
]