wekan/client/components/main/header.jade

template(name="header")
  //-
    If the user is connected we display a small "quick-access" top bar that
    list all starred boards with a link to go there. This is inspired by the
    Reddit "subreddit" bar.
    The first link goes to the boards page.
  if currentUser
    #header-quick-access(class="{{#if currentUser.globalThemeColorClass}}{{currentUser.globalThemeColorClass}}{{else}}{{currentBoard.colorClass}}{{/if}}" role="navigation" aria-label="{{_ 'all-boards'}}")
      // Home icon - always at left side of logo
      span.home-icon.allBoards
        a(href="{{pathFor 'home'}}")
          i.fa.fa-home
          | {{_ 'all-boards'}}

      // Logo - visible; on mobile constrained by CSS
      unless currentSetting.hideLogo
        if currentSetting.customTopLeftCornerLogoImageUrl
          if currentSetting.customTopLeftCornerLogoLinkUrl
            a(href="{{currentSetting.customTopLeftCornerLogoLinkUrl}}" alt="{{currentSetting.productName}}" title="{{currentSetting.productName}}")
              img(src="{{currentSetting.customTopLeftCornerLogoImageUrl}}" height="{{#if currentSetting.customTopLeftCornerLogoHeight}}#{currentSetting.customTopLeftCornerLogoHeight}{{else}}27{{/if}}" width="auto" margin="0" padding="0")
          unless currentSetting.customTopLeftCornerLogoLinkUrl
            img(src="{{currentSetting.customTopLeftCornerLogoImageUrl}}" height="{{#if currentSetting.customTopLeftCornerLogoHeight}}#{currentSetting.customTopLeftCornerLogoHeight}{{else}}27{{/if}}" width="auto" margin="0" padding="0" alt="{{currentSetting.productName}}" title="{{currentSetting.productName}}")
        unless currentSetting.customTopLeftCornerLogoImageUrl
          div#headerIsSettingDatabaseCallDone
            img(src="{{pathFor '/logo-header.png'}}" alt="{{currentSetting.productName}}" title="{{currentSetting.productName}}")

      // Mobile/desktop mode toggle (swapped with zoom)
      .mobile-mode-toggle
        a.board-header-btn.js-mobile-mode-toggle(title="{{_ 'mobile-desktop-toggle'}}" class="{{#if mobileMode}}mobile-active{{else}}desktop-active{{/if}}")
          i.mobile-icon(class="{{#if mobileMode}}active{{/if}}")
            i.fa.fa-mobile
          i.desktop-icon(class="{{#unless mobileMode}}active{{/unless}}")
            i.fa.fa-desktop

      // Drag handles toggle - between zoom and mobile mode toggle
      a.board-header-btn.js-toggle-desktop-drag-handles(title="{{_ 'show-desktop-drag-handles'}}")
        i.fa.fa-arrows
        if isShowDesktopDragHandles
          i.fa.fa-check
        unless isShowDesktopDragHandles
          i.fa.fa-ban

      if isMiniScreen
        ul.header-quick-access-list
          if currentList
            each currentBoard.lists
              li(class="{{#if $.Session.equals 'currentList' _id}}current{{/if}}")
                a.js-select-list
                  +viewer
                    = title
          else
            each currentUser.starredBoards
              li(class="{{#if $.Session.equals 'currentBoard' _id}}current{{/if}}")
                a(href="{{pathFor 'board' id=_id slug=slug}}")
                  +viewer
                    = title
        #header-new-board-icon
      else
        ul.header-quick-access-list
          //li
          //
            a(href="{{pathFor 'public'}}")
          //
              span.fa.fa-globe
          //
              | {{_ 'public'}}
          each currentUser.starredBoards
            li(class="{{#if $.Session.equals 'currentBoard' _id}}current{{/if}}")
              a(href="{{pathFor 'board' id=_id slug=slug}}")
                +viewer
                  = title
          else
            li.current(title="{{_ 'quick-access-description'}}")
            | {{_ 'quick-access-description'}}
      //
        Hide duplicate create board button,
      //
        because it did not show board templates correctly.
      //a#header-new-board-icon.js-create-board
      //
        i.fa.fa-plus(title="Create a new board")

      // Zoom controls (swapped with the mobile/desktop toggle)
      .zoom-controls
        span.zoom-level.js-zoom-level-click(title="{{_ 'click-to-change-zoom'}}")
          span.zoom-display {{zoomLevel}}%
          input.zoom-input.js-zoom-input(type="number" value=zoomLevel min="50" max="300" step="10" style="display: none;")

      // Notifications
      +notifications

      if currentSetting.customHelpLinkUrl
        #header-help
          a(href="{{currentSetting.customHelpLinkUrl}}", title="{{_ 'help'}}", target="_blank", rel="noopener noreferrer")
            i.fa.fa-question-circle

      +headerUserBar

  #header(class="{{#if currentUser.globalThemeColorClass}}{{currentUser.globalThemeColorClass}}{{else}}{{currentBoard.colorClass}}{{/if}}")
    //-
      The main bar is a colorful bar that provide all the meta-data for the
      current page. This bar is contextual based.
      If the user is not connected we display "sign in" and "log in" buttons.
    #header-main-bar(class="{{#if wrappedHeader}}wrapper{{/if}}")
      +Template.dynamic(template=headerBar)

  if appIsOffline
    +offlineWarning

  if currentUser.isBoardMember
    if hasAnnouncement
      .announcement(role="status" aria-live="polite")
        p
          i.fa.fa-bullhorn(aria-hidden="true")
          +viewer
            | #{announcement}
          a.js-close-announcement(aria-label="{{_ 'close'}}" title="{{_ 'close'}}")
            i.fa.fa-times-thin(aria-hidden="true")

template(name="offlineWarning")
  .offline-warning
    p
      i.fa.fa-warning
      | {{_ 'app-is-offline'}}
      if appOfflineMessage
        br
        span= appOfflineMessage
      if canReconnectNow
        br
        a.app-try-reconnect {{_ 'app-try-reconnect'}}