solid-router#navbar-router(default-route='dashboard')
  for component of components
    if component.route
      if component.type == "about"
        solid-route(name=component.route, hidden)
      if component.type == "dashboard"
        solid-route.menu.segment.full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active(name=component.route)
          div.segment.margin-right-xxsmall
            div.icon.icon-small.icon-home
          div.segment.text-uppercase.text-letter-spacing-large(data-trans="menuLeft.dashboard")
        div.divider
      if component.type == "circles"
        div.menu-wrapper
          if componentSet.has("admin")
            solid-route.menu.segment.full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active(name=`admin-${component.route}`)
              div.segment.margin-right-xxsmall
                div.segment.icon.icon-small.icon-folder-alt
              div.segment.three-quarter.text-uppercase.text-letter-spacing-large(data-trans="menuLeft.circles")
              div.menu-chevron.segment
                div.menu-icon.icon-arrow-right-circle
            solid-route(name=`admin-${component.route}-create`)
          else
            div.menu.segment.full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading
              div.segment.margin-right-xxsmall
                div.segment.icon.icon-small.icon-folder-alt
              div.segment.three-quarter.text-uppercase.text-letter-spacing-large(data-trans="menuLeft.circles")
          solid-route(name=component.route, rdf-type='hd:circle', use-id='', hidden)
          solid-route(name=`${component.route}-left`)
          div.sub-menu.menu-notification
            div.loader.loader-menu(id=`loader-${component.route}`)
              div
              div
              div
              div
            solid-display.ellipsis(
              bind-user
              nested-field='circles'
              fields='circle'
              loader-id=`loader-${component.route}`
              empty-widget='hubl-menu-create'
              empty-value=''
              data-trans="empty-value=menuLeft.emptyCircleProject.circle"
              widget-circle='hubl-menu-fix-url-circle'
              order-asc="circle.name"
            )
        div.divider
      if component.type == "chat"
        div.menu-wrapper
          if componentSet.has("admin")
            solid-route.menu.segment.full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active(name=`admin-${component.route}`)
              div.segment.margin-right-xxsmall
                div.segment.icon.icon-small.icon-folder-alt
              div.segment.three-quarter.text-uppercase.text-letter-spacing-large(data-trans="menuLeft.messages")
              div.menu-chevron.segment
                div.menu-icon.icon-arrow-right-circle
            solid-route(name=`admin-${component.route}-create`, use-id='', hidden)
          else
            div.menu.segment.full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading
              div.segment.margin-right-xxsmall
                div.segment.icon.icon-small.icon-folder-alt
              div.segment.three-quarter.text-uppercase.text-letter-spacing-large(data-trans="menuLeft.messages")
        solid-route(name=component.route, rdf-type='foaf:user', use-id='', hidden)
        div.sub-menu.menu-notification
          div.loader.loader-menu(id=`loader-${component.route}`)
            div
            div
            div
            div
            //- search-fields="contact.name"
            //- search-label-contact.name=""
            //- data-trans="search-label-contact.name=menuLeft.search"
            //- search-widget-contact.name="hubl-search-users"
          solid-display.segment.full.whitespace-normal(
            bind-user
            nested-field='contacts'
            fields='contact'
            loader-id=`loader-${component.route}`
            empty-widget='hubl-create-contact'
            empty-value=''
            widget-contact='hubl-menu-fix-url-contact'
            order-asc="contact.username"
          )
      if component.type == "projects"
        div.menu-wrapper
          if componentSet.has("admin")
            solid-route.menu.segment.full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active(name=`admin-${component.route}`)
              div.segment.margin-right-xxsmall
                div.segment.icon.icon-small.icon-folder-alt
              div.segment.three-quarter.text-uppercase.text-letter-spacing-large(data-trans="menuLeft.projects")
              div.menu-chevron.segment
                div.icon-arrow-right-circle
            solid-route(name=`admin-${component.route}-create`, hidden)
          else
            div.menu.segment.full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading
              div.segment.margin-right-xxsmall
                div.segment.icon.icon-small.icon-folder-alt
              div.segment.three-quarter.text-uppercase.text-letter-spacing-large(data-trans="menuLeft.projects")
          solid-route(name=component.route, rdf-type='hd:project', use-id='', hidden)
          solid-route(name=`${component.route}-left`, hidden)
          div.sub-menu.menu-notification
            div.loader.loader-menu(id=`loader-${component.route}`)
              div
              div
              div
              div
            solid-display.ellipsis(
              bind-user
              nested-field='projects'
              fields='project'
              loader-id=`loader-${component.route}`
              empty-widget='hubl-menu-create'
              empty-value=''
              data-trans="empty-value=menuLeft.emptyCircleProject.project"
              widget-project='hubl-menu-fix-url-project'
              order-asc="project.customer.name"
            )
        div.divider
      if component.type == "profileDirectory"
        solid-route.menu.segment.full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active(name=component.route)
          div.segment.margin-right-xxsmall
            div.icon.icon-small.icon-people
          div.segment.text-uppercase.text-letter-spacing-large(data-trans="menuLeft.profileDirectory")
        solid-route.menu(name=`${component.route}-profile`, hidden)
        div.divider
      if component.type == "jobBoard"
        solid-route.menu.segment.full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active(name=component.route, rdf-type='hd:joboffer')
          div.segment.margin-right-xxsmall
            div.segment.icon.icon-small.icon-briefcase
          div.segment.text-uppercase.text-letter-spacing-large(data-trans="menuLeft.jobBoard")
        div.divider
      if component.type == "resources"
        solid-route.menu.segment.full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active(name=component.route)
          div.segment.margin-right-xxsmall
            div.segment.icon.icon-small.icon-docs
          div.segment.text-uppercase.text-letter-spacing-large(data-trans="menuLeft.resources")
        div.divider
      if component.type == "polls"
        solid-route.menu.segment.full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active(name=component.route)
          div.segment.margin-right-xxsmall
            div.segment.icon.icon-small.icon-bubbles
          div.segment.text-uppercase.text-letter-spacing-large(data-trans="menuLeft.gov")
        div.divider
      if component.type == "events"
        solid-route.menu.segment.full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active(name=component.route)
          div.segment.margin-right-xxsmall
            div.segment.icon.icon-small.icon-calendar
          div.segment.text-uppercase.text-letter-spacing-large(data-trans="menuLeft.events")
        div.divider
  if componentSet.has('registering')
    solid-route(name='join-community', use-id, hidden)
    solid-route(name='login', hidden)