xen-orchestra/app/modules/navbar/view.jade

nav.navbar.navbar-inverse.navbar-fixed-top(role = 'navigation')
  //- Brand and toggle get grouped for better mobile display
  .navbar-header
    //- Button used to (un)collapse on mobile display.
    button.navbar-toggle(type="button", ng-init="collapsed = true", ng-click="collapsed = !collapsed")
      span.sr-only Toggle navigation
      span.icon-bar
      span.icon-bar
      span.icon-bar
    //- Brand name.
    a.navbar-brand(ui-sref = 'index')
      img.navbar-logo(src="images/logo.png")
      | Xen Orchestra
  //- All navbar items are collapsed on mobile display.
  .collapse.navbar-collapse(ng-class="!collapsed && 'in'")
    //- Search form of the navbar.
    form.navbar-form.navbar-left(role="search", style="width: 250px")
      //- Forced width due to issue with `input`s (https://github.com/twbs/bootstrap/issues/9950.
      .input-group
        input.form-control.inverse(
          type = 'text'
          placeholder = ''
          ng-model = '$root.listFilter'
          ng-change = 'ensureListView($root.listFilter)'
        )
        span.input-group-btn
          button.btn.btn-search(
            type = 'button'
            ng-click = 'ensureListView($root.listFilter)'
          )
            i.fa.fa-search
    //- /Search form.
    ul.nav.navbar-nav
      li
        a(href="https://xen-orchestra.com/#/pricing?pk_campaign=xoa_source", target="_blank", tooltip="Source version without Pro support. Use in production at your own risk.")
          i.xo-icon-info.text-danger
          span.hidden-sm  No Pro Support!
    //- Right items of the navbar.
    ul.nav.navbar-nav.navbar-right
      li.navbar-text(ng-if="'disconnected' === navbar.status")
        i.xo-icon-error
        |  Disconnected from XO-Server
      li.navbar-text(ng-if="'connecting' === navbar.status")
        i.fa.fa-refresh.fa-spin
        |  Connecting to XO-Server
      //- Running tasks
      li.disabled(ng-if="!navbar.tasks.size", tooltip="No running tasks")
        a.dropdown-toggle.inverse
          i.xo-icon-task
      li.dropdown(dropdown, ng-if="navbar.tasks.size")
        a.dropdown-toggle.inverse(dropdown-toggle)
          i.xo-icon-task
        ul.dropdown-menu.inverse
          li.task-menu(
            ng-repeat="task in navbar.tasks.all | orderBy:natural('name_label') track by task.id"
          )
            a(
              ui-sref="hosts_view({id: task.$host})"
              tooltip = "{{task.name_label}}"
            )
              //- i.fa.fa-spinner.fa-fw
              //- | {{task.name_label}}
              .progress-condensed
                .progress-bar.progress-bar-success.progress-bar-striped.active.progress-bar-black(
                  role = "progressbar"
                  aria-valuemin = "0"
                  aria-valuenow = "{{task.progress*100}}"
                  aria-valuemax = "100"
                  style = "width: {{task.progress*100}}%"
                )
                  | {{task.progress*100 | number:1}}%
      //- Main menu.
      li.dropdown(dropdown)
        a.dropdown-toggle.inverse(dropdown-toggle)
          i.fa.fa-th
        ul.dropdown-menu.inverse
          li(
            ui-sref-active = 'active'
            ng-class = '{ disabled: navbar.user.permission !== "admin" }'
          )
            a(ui-sref = 'tree')
              i.fa.fa-indent
              |  Tree view
          li(ui-sref-active="active")
            a(ui-sref="list")
              i.fa.fa-align-justify
              |  Flat view
          li(
            ui-sref-active="active"
            ng-class = '{ disabled: navbar.user.permission !== "admin" }'
          )
            a(ui-sref="dashboard.index")
              i.fa.fa-dashboard
              |  Dashboard
          li.divider
          li(ng-class = '{ disabled: navbar.user.permission !== "admin" }')
            a(ui-sref = 'self.index')
              i.fa.fa-cloud
              |  Self Service
          li.divider
          li(ng-class = '{ disabled: navbar.user.permission !== "admin" }')
            a(ui-sref = 'backup.index')
              i.fa.fa-archive
              |  Backup
          li(ng-class = '{ disabled: navbar.user.permission !== "admin" }')
            a(ui-sref = 'taskscheduler.index')
              i.fa.fa-cogs
              |  Job Manager
          li.divider
          li(
            ui-sref-active = 'active'
            ng-class = '{ disabled: navbar.user.permission !== "admin" }'
          )
            a(ui-sref="settings.index")
              i.fa.fa-cog
              |  Settings
          li.divider
          li(ui-sref-active="active")
            a(ui-sref="about")
              i.fa.fa-info-circle(style="color:#5bc0de")
              |  About
      //- /Main menu.

      li
        a(ui-sref="settings.update")
          i.fa.fa-question-circle.text-warning(ng-if = '!navbar.updater.state', tooltip = 'No update information available')
          i.fa.fa-question-circle.text-info(ng-if = 'navbar.updater.state == "connected"', tooltip = 'Update information may be available')
          i.fa.fa-check.text-success(ng-if = 'navbar.updater.state == "upToDate"', tooltip = 'Your XOA is up-to-date')
          i.fa.fa-bell.text-primary(ng-if = 'navbar.updater.state == "upgradeNeeded"', tooltip = 'You need to update your XOA (new version is available)')
          i.fa.fa-bell-slash.text-warning(ng-if = 'navbar.updater.state == "registerNeeded"', tooltip = 'Your XOA is not registered for updates')
          i.fa.fa-exclamation-triangle.text-danger(ng-if = 'navbar.updater.state == "error"', tooltip = 'Can\'t fetch update information')

      li
        a(ng-if = '!navbar.user.provider', ui-sref="{{navbar.user.provider ? 'settings.users' : 'settings.user'}}", tooltip="{{navbar.user.email}}")
          i.fa.fa-user
          span.hidden-sm  {{navbar.user.email}}
      li
        a(ng-click = 'navbar.logOut()')
          i.fa.fa-sign-out
          |  
          |  

    //- /Right items.
  //- /Navbar items.
//- /Navbar.