solid-form-search(
  id='general-search'
  class='segment block form menu-search'
  fields='name'
  search-name='circle.name, project.customer.name, project.name, contact.username, contact.name'
  order-asc-names='name'

  placeholder-name=''
  data-trans='placeholder-name=menuLeft.search'
  widget-name="solid-form-placeholder-text"

  submit-button=""
  submit-widget="button"
  class-submit-button="icon children-icon-magnifier"
)
div.divider
solid-router#navbar-router(default-route=defaultRoute)
  for component of components
    if component.route
      if component.type == "about"
        solid-route(name=component.route, hidden)
      if component.type == "dashboard"
        solid-route.menu-tab.segment.full.padding-xsmall.text-semibold.text-color-white.heading-active.bg-color-heading.transparent-background.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=`${component.name?component.name:"menuLeft.dashboard"}`)
        div.divider
      if component.type == "communities"
        solid-route.menu.segment.full.padding-xsmall.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-grid
          div.segment.text-uppercase.text-letter-spacing-large(data-trans="menuLeft.communities")
        div.divider
          
      if component.type == "circles"
        div.jsMenuTab
          div.menu-header.segment.full.padding-xsmall.text-semibold.text-color-white.bg-color-heading.transparent-background.hover.cursor-pointer.jsMenuHeader
            div.segment.margin-right-xxsmall.jsMenuArrow
              div.segment.icon.icon-small.icon-arrow-down
            div.segment.half.text-uppercase.text-letter-spacing-large(data-trans=`${component.name?component.name:"menuLeft.circles"}`)
            if componentSet.has("admin")
              div.menu-options.segment.jsMenuOption
                div.menu-icon.icon.icon-small.icon-options-vertical
              div.menu-admin.segment.bg-color-white.shadow.text-color-secondary.padding-xxsmall.whitespace-normal.hidden.jsMenuAdmin
                span.segment.full.one-line-ellipsis.padding-xxsmall.sm-padding-xsmall.lg-hidden(data-trans="menuLeft.closeMenu" onclick="this.parentElement.classList.toggle('hidden', true)")
                solid-link.segment.full.one-line-ellipsis.padding-xxsmall.sm-padding-xsmall(next=`admin-${component.route}` data-trans="menuLeft.circlesBrowse")
                solid-link.segment.full.one-line-ellipsis.padding-xxsmall.sm-padding-xsmall(next=`admin-${component.route}-create` data-trans="menuLeft.circleCreate")
            solid-badge.badge(data-type="Mention" data-rdf-type="hd:circle")
          solid-route(name=`admin-${component.route}` hidden)
          solid-route(name=`admin-${component.route}-create` hidden)
          solid-route(name=`admin-${component.route}-leave` hidden)
          solid-route(name=component.route rdf-type='hd:circle' use-id='' hidden)
          solid-route(name=`${component.route}-left` hidden)
          div.sub-menu.menu-notification.padding-bottom-xxsmall.jsMenuSub
            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='orbit-menu-empty'
              empty-value=''
              data-trans="empty-value=menuLeft.emptyCircleProject.circle"
              widget-circle='orbit-menu-fix-url-circle'
              order-asc="circle.name"
              filtered-by="general-search"
            )
        div.divider
      if component.type == "chat"
        div.jsMenuTab
          div.menu-header.segment.full.padding-xsmall.text-semibold.text-color-white.bg-color-heading.transparent-background.hover.cursor-pointer.jsMenuHeader
            div.segment.margin-right-xxsmall.jsMenuArrow
              div.segment.icon.icon-small.icon-arrow-down
            div.segment.half.text-uppercase.text-letter-spacing-large(data-trans=`${component.name?component.name:"menuLeft.messages"}`)
            if componentSet.has("directory")
              div.menu-options.segment.jsMenuOption
                solid-link.segment.block.menu-icon.icon.icon-small.icon-user-follow(next=getRoute('directory', true))
            solid-badge.badge(data-type="Message")
          solid-route(name=`admin-${component.route}`, hidden)
          solid-route(name=`admin-${component.route}-create` use-id='' hidden)
          solid-route(name=component.route, rdf-type='foaf:user', use-id='', hidden)
          div.sub-menu.menu-notification.padding-bottom-xxsmall.jsMenuSub
            div.loader.loader-menu(id=`loader-${component.route}`)
              div
              div
              div
              div
            solid-display.sub-menu__contacts.segment.full.children-full.whitespace-normal(
              bind-user
              nested-field='contacts'
              fields='contact, @id'
              loader-id=`loader-${component.route}`
              empty-widget='orbit-menu-empty'
              widget-contact='orbit-menu-fix-url-contact'
              widget-id='orbit-menu-contact-removed'
              filtered-by="general-search"
              order-asc="contact.name"
            )
      if component.type == "projects"
        div.jsMenuTab
          div.menu-header.segment.full.padding-xsmall.text-semibold.text-color-white.heading-active.bg-color-heading.transparent-background.hover.active.cursor-pointer.jsMenuHeader
            div.segment.margin-right-xxsmall.jsMenuArrow
              div.segment.icon.icon-small.icon-arrow-down
            div.segment.half.text-uppercase.text-letter-spacing-large(data-trans="menuLeft.projects")
            if componentSet.has("admin")
              div.menu-options.segment.jsMenuOption
                div.menu-icon.icon.icon-small.icon-options-vertical
              div.menu-admin.segment.bg-color-white.shadow.text-color-secondary.padding-xxsmall.whitespace-normal.hidden.jsMenuAdmin
                span.segment.full.one-line-ellipsis.padding-xxsmall.sm-padding-xsmall.lg-hidden(data-trans="menuLeft.closeMenu" onclick="this.parentElement.classList.toggle('hidden', true)")
                solid-link.segment.full.one-line-ellipsis.padding-xxsmall.sm-padding-xsmall(next=`admin-${component.route}` data-trans="menuLeft.projectsBrowse")
                solid-link.segment.full.one-line-ellipsis.padding-xxsmall.sm-padding-xsmall(next=`admin-${component.route}-create` data-trans="menuLeft.projectCreate")
            solid-badge.badge(data-type="Mention" data-rdf-type="hd:project")
          solid-route(name=`admin-${component.route}`, hidden)
          solid-route(name=`admin-${component.route}-create`, hidden)
          solid-route(name=component.route, rdf-type='hd:project', use-id='', hidden)
          solid-route(name=`${component.route}-left`, hidden)
          div.sub-menu.menu-notification.padding-bottom-xxsmall.jsMenuSub
            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='orbit-menu-empty'
              data-trans="empty-value=menuLeft.emptyCircleProject.project"
              widget-project='orbit-menu-fix-url-project'
              filtered-by="general-search"
              order-asc="project.customer.name"

            )
        div.divider
      if component.type == "directory"
        solid-route.menu-tab.segment.full.padding-xsmall.text-semibold.text-color-white.heading-active.bg-color-heading.transparent-background.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 == "job-board"
        solid-route.menu-tab.segment.full.padding-xsmall.text-semibold.text-color-white.heading-active.bg-color-heading.transparent-background.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-tab.segment.full.padding-xsmall.text-semibold.text-color-white.heading-active.bg-color-heading.transparent-background.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-tab.segment.full.padding-xsmall.text-semibold.text-color-white.heading-active.bg-color-heading.transparent-background.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-tab.segment.full.padding-xsmall.text-semibold.text-color-white.heading-active.bg-color-heading.transparent-background.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 component.type == "link"
        a.menu-tab.segment.full.padding-xsmall.text-semibold.text-color-white.heading-active.bg-color-heading.transparent-background.hover.active(href=component.parameters.target, target="_blank")
          div.segment.margin-right-xxsmall
            div.segment.icon.icon-small&attributes({"class": component.parameters.icon})
          div.segment.text-uppercase.text-letter-spacing-large(data-trans=component.parameters.name)
        div.divider
  if componentSet.has('registering')
    solid-route(name='join-community', use-id, hidden)
    solid-route(name='login', hidden)