hubl/src/views/partials/header.pug

div

  solid-link.segment.sm-hidden(next=getRoute('dashboard', true))
    h1.text-color-heading.text-medium.text-semibold.text-letter-spacing-large=client.name || 'Hubl'
  button.segment.lg-hidden.icon-menu#toggleMainMenu

  span.tag.reversed.text-bold.margin-left-xsmall(data-trans='header.beta')

  div
    if componentSet.has("themeChecker")
      div.selector.text-center
        each val, index in ['primary', 'secondary', 'third', 'heading']
          label.segment.margin-right-medium.margin-top-xsmall= 'Couleur ' + (index+1)
            input.input-color(
              id='color-'+val
              type="text"
            )

    if componentSet.has("notification")
      solid-notifications.segment.margin-right-large(
        nested-field="inbox"
        bind-user
      )

    if componentSet.has("autoLogin") || componentSet.has("registering")
      //- User menu visible on large screens
      details.segment.sm-hidden.user-controls
        summary.text-right.padding-right-xsmall.padding-left-xsmall
          solid-display.labelled-avatar(
            fields='segment1(account.picture), segment2(button)'
            class-segment1='segment'
            class-segment2='segment margin-left-xxsmall'
            class-account.picture="avatar xxsmall"
            class-button='icon icon-small icon-arrow-down'
            widget-account.picture='hubl-user-avatar'
            bind-user
          )
        div.panel
          nav.bg-color-white.text-semibold.text-color-heading
            ul
              if componentSet.has("profileDirectory")
                li.border-bottom.border-color-grey
                  solid-link.segment.padding-small.text-hover(next=`${getRoute("profileDirectory", true)}-profile` data-trans='header.myProfile')
              if componentSet.has("admin")
                li.segment.padding-small.border-bottom.border-color-grey
                  div(data-trans='header.admin')
                  ul.text-normal
                    if componentSet.has("communities") && getComponent("chat").route
                      solid-link.text-hover(next=`admin-${getRoute("chat", true)}`)
                        li.segment.padding-top-small
                          a.icon.icon-grid.icon-third.icon-small.icon-margin-right-xsmall(data-trans='admin.menuRight.community')
                    if componentSet.has("circles") && getComponent("circles").route
                      solid-link.text-hover(next=`admin-${getRoute("circles", true)}`)
                        li.segment.padding-top-small
                          a.icon.icon-globe.icon-third.icon-small.icon-margin-right-xsmall(data-trans='admin.menuRight.circles')
                    if componentSet.has("projects") && getComponent("projects").route
                      solid-link.text-hover(next=`admin-${getRoute("projects", true)}`)
                        li.segment.padding-top-small
                          a.icon.icon-folder-alt.icon-third.icon-small.icon-margin-right-xsmall(data-trans='admin.menuRight.projects')
              if componentSet.has("about")
                li.border-bottom.border-color-grey
                  solid-link.segment.padding-small.text-hover(next=getRoute('about', true) data-trans='header.about')
              li
                button.segment.padding-small.text-hover.text-semibold.text-color-heading(role='log out' onclick="document.querySelector('sib-auth').logout();" data-trans='header.logOut')

      //- User menu visible on small screens
      details.user-menu.segment.lg-hidden.user-controls
        summary
          solid-display.labelled-avatar(
            fields='segment1(account.picture), segment3(button)'
            class-segment1='segment'
            class-segment3='segment sm-arrow-down'
            class-account.picture="avatar"
            class-button='icon icon-arrow-down'
            widget-account.picture='hubl-user-avatar'
            bind-user
          )
          solid-display.user-firstname(
            fields='segment1(account.picture), segment2(first_name), segment3(button)'
            class-segment1='segment'
            class-segment2='segment margin-left-small'
            class-segment3='segment'
            class-account.picture="avatar"
            class-first_name="text-semibold text-color-heading"
            class-button='icon icon-arrow-down'
            widget-account.picture='hubl-user-avatar'
            bind-user
          )
        div.panel
          nav.bg-color-white.text-semibold.text-color-heading
            ul
              if componentSet.has("profileDirectory")
                li.border-bottom.border-color-grey
                  solid-link.segment.padding-small.sm-padding-medium.sm-padding-left-xlarge.text-hover(next=`${getRoute("profileDirectory", true)}-profile` data-trans='header.myProfile')
              if componentSet.has("admin")
                li.segment.padding-small.sm-padding-medium.sm-padding-left-xlarge.border-bottom.border-color-grey
                  div(data-trans='header.admin')
                  ul.text-normal
                    if componentSet.has("communities") && getComponent("chat").route
                      solid-link.text-hover(next=`admin-${getRoute("chat", true)}`)
                        li.segment.padding-top-small.sm-padding-top-medium
                          a.icon.icon-grid.icon-third.icon-small.icon-margin-right-xsmall(data-trans='admin.menuRight.community')
                    if componentSet.has("circles") && getComponent("circles").route
                      solid-link.text-hover(next=`admin-${getRoute("circles", true)}`)
                        li.segment.padding-top-small.sm-padding-top-medium
                          a.icon.icon-globe.icon-third.icon-small.icon-margin-right-xsmall(data-trans='admin.menuRight.circles')
                    if componentSet.has("projects") && getComponent("projects").route
                      solid-link.text-hover(next=`admin-${getRoute("projects", true)}`)
                        li.segment.padding-top-small.sm-padding-top-medium
                          a.icon.icon-folder-alt.icon-third.icon-small.icon-margin-right-xsmall(data-trans='admin.menuRight.projects')
              if componentSet.has("about")
                li.border-bottom.border-color-grey
                  solid-link.segment.padding-small.sm-padding-medium.sm-padding-left-xlarge.text-hover(next=getRoute('about', true) data-trans='header.about')
              li
                button.segment.padding-small.sm-padding-medium.sm-padding-left-xlarge.text-hover.text-bold.text-color-heading(role='log out' onclick="document.querySelector('sib-auth').logout();" data-trans='header.logOut')