Skip to content

Header navigation

The configuration for top navigation bar

image

Name Description
titleColor color of the title (optional), default to branding titleColor or black, branding color will have higher precedence than this config value (AppConfig.instance.titleColor in theme.dart)
titleSpacing optional (default to 0.0), spacing between top left (org logo) icon and title
backgroundColor background color of the navigation bar
logoColor Org logo color (white, dark, color, or null)
logoSize optional (default to 48px), size of logo (top left icon)
extendBodyBehindAppBar whether to push content into the navigation bar
paddingLeft left padding (left of org icon)
paddingRight right padding (right of hamburgar)
sideNavigation navigation for tablet view, default to true, if false, use same layout as phone
borderRadius border radius of navigation bar
header list of right navigations (fig. 3 above), see below for config
  • search
    • icon: icon name
    • iconSize: size of icon
    • color: icon color
    • options: search options
      • list: list of search tabs
        • kind: dispatch | user
        • template: query template for dispatch queries; use {search} for the user data
        • icon: icon name (optiona, either icon or text should be provided)
        • text: label (optional, either icon or text should be provided)
  • notification
    • icon: icon name
    • iconSize: size of icon
    • color: icon color
    • options:
  • shopping-cart
    • icon: icon name
    • iconSize: size of icon
    • color: icon color
    • options:
      • bucketHandle: shopping bucket handle
  • side-menu
    • icon: icon name
    • iconSize: size of icon
    • color: icon color
    • options:
  • layout
    • icon: icon name
    • iconSize: size of icon
    • color: icon color
    • options:
      • id: layout id
      • other layout options
  • create
    • icon: icon name
    • iconSize: size of icon
    • color: icon color

The default search string is current user where body contains 'search'. This can be changed using the template property. The property supports {search} for the user entered text and can be used more than once.

Examples

  • given trackers [journal] where body contains '{search}'
  • current user where key:foo is '{search}' or key:bar is '{search}'

Example

{
  "settings": {
    "navigation": {
        "default": {
            "backgroundColor": "#ffffff",
            "extendBodyBehindAppBar": true,
            "paddingLeft": "10px",
            "paddingRight": "10px",
            "sideNavigation": false,
            "borderRadius": {
              "bottomLeft": 25.0,
              "bottomRight": 25.0
            },
            "header": [
              {
                  "target": "search",
                  "icon": "far fa-magnifying-glass",
                  "color": "#ffffff"
              },
              {
                  "target": "notification",
                  "icon": "far fa-bell"
              },
              {
                  "target": "shopping-cart",
                  "icon": "far fa-bag-shopping",
                  "options": {
                  "pageId": "2a8a3b51-1159-4836-956d-abd50fc03b56",
                  "title": "Shopping cart",
                  "bucketHandle": "shopping-cart"
                  }
              },
              {
                "target": "side-menu",
                "icon": "far fa-bars",
                "color: "#fff"
              }
            ]
        }
    }
  }
}