hubl/src/views/partials/header.pug

div

  solid-link.segment.sm-hidden(next='dashboard')
    img.logo(src=`${clientLogo || '/images/logo.webp'}`)
  button.segment.lg-hidden.icon-menu#toggleMainMenu


  span.tag.reversed.text-semibold(data-trans='header.beta')

  div
    if 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"
            )

    solid-notifications.segment.sm-margin-right-xlarge(
      nested-field="inbox"
      bind-user
    )

    //- User menu visible on large screens
    details.segment.sm-hidden.user-controls
      summary.text-right
        solid-display.labelled-avatar.padding-top-xsmall(
          fields='segment1(account.picture), segment2(first_name), segment3(button)'
          class-segment1='segment'
          class-segment2='segment margin-left-small'
          class-segment3='segment margin-left-xxsmall'
          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 (endpoints.uploads || (endpoints.get && endpoints.get.uploads)) && (endpoints.skills || (endpoints.get && endpoints.get.skills)) && (endpoints.users || (endpoints.get && endpoints.get.users))
              li.border-bottom.border-color-grey
                solid-link.segment.padding-small.text-hover(next='profile' data-trans='header.myProfile')
            li.segment.padding-small.border-bottom.border-color-grey
              div(data-trans='header.admin')
              ul.text-normal
                if endpoints.get.users
                  solid-link.text-hover(next='admin-communities')
                    li.segment.padding-top-small
                      a.icon.icon-people.icon-third.icon-small.icon-margin-right-xsmall(data-trans='admin.menuRight.community')
                if endpoints.get.circles
                  solid-link.text-hover(next='admin-circles')
                    li.segment.padding-top-small
                      a.icon.icon-globe.icon-third.icon-small.icon-margin-right-xsmall(data-trans='admin.menuRight.circles')
                if endpoints.get.projects
                  solid-link.text-hover(next='admin-projects')
                    li.segment.padding-top-small
                      a.icon.icon-folder-alt.icon-third.icon-small.icon-margin-right-xsmall(data-trans='admin.menuRight.projects')
            li.border-bottom.border-color-grey
              solid-link.segment.padding-small.text-hover(next='about' 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')

      button.segment.lg-hidden.icon-menu#toggleMainMenu

      sib-auth(style='display:none!important', auto-login)
        sib-auth-provider(
          data-authority=`${authority}`
          data-id=`${authorityName || "authority"}`
          data-client-name=`${clientName || "Hubl"}`
        )

    //- 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 (endpoints.uploads || (endpoints.get && endpoints.get.uploads)) && (endpoints.skills || (endpoints.get && endpoints.get.skills)) && (endpoints.users || (endpoints.get && endpoints.get.users))
              li.border-bottom.border-color-grey
                solid-link.segment.padding-small.sm-padding-medium.sm-padding-left-xlarge.text-hover(next='profile' data-trans='header.myProfile')
            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 endpoints.get.users
                  solid-link.text-hover(next='admin-communities')
                    li.segment.padding-top-small.sm-padding-top-medium
                      a.icon.icon-people.icon-third.icon-small.icon-margin-right-xsmall(data-trans='admin.menuRight.community')
                if endpoints.get.circles
                  solid-link.text-hover(next='admin-circles')
                    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 endpoints.get.projects
                  solid-link.text-hover(next='admin-projects')
                    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')
            li.border-bottom.border-color-grey
              solid-link.segment.padding-small.sm-padding-medium.sm-padding-left-xlarge.text-hover(next='about' 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')

      button.segment.lg-hidden.icon-menu#toggleMainMenu

      sib-auth(style='display:none!important', auto-login)
        sib-auth-provider(
          data-authority=`${authority}`
          data-id=`${authorityName || "authority"}`
          data-client-name=`${clientName || "Hubl"}`
        )