.scrollbar-content.views-container.sidebar-is-closed.bg-color-white
  solid-ac-checker(permission='acl:Read', bind-resources)
    div(
      id=`${component.route}-chat`
      hidden
      data-view=`${component.route}-chat`
      no-render
    )
      include partials/circle/page-circle-chat.pug
    div(
      id=`${component.route}-information`
      hidden
      data-view=`${component.route}-information`
      no-render
    )
      include partials/circle/page-circle-profile.pug
    //- Note:
      Instead of using flat events/resources or polls components, you
      may you to expend the way circle work to handle events & cie.
      Like:
        {
          "type": "circles",
          ...
          "extensions": [
            {
              "type": "events",
              "endpoints": {...},
              ...
            }
          ]
        }
    -
      let extensions = new Set();
      if(component.extensions) {
        extensions = new Set(component.extensions.map(c=>c.type));
      }
    if extensions.has('events')
      div(
        id=`${component.route}-events`
        hidden
        data-view=`${component.route}-events`
        no-render
      )
        include partials/circle/page-circle-events.pug
    if extensions.has('resources')
      div(
        id=`${component.route}-resources`
        hidden
        data-view=`${component.route}-resources`
        no-render
      )
        include partials/circle/page-circle-resources.pug
    if extensions.has('polls')
      div(
        id=`${component.route}-polls`
        hidden
        data-view=`${component.route}-polls`
        no-render
      )
        include partials/circle/page-circle-polls.pug

nav.jsRightMenu.text-disable-selection.sidebar.whitespace-normal(role='navigation')
  solid-router.segment.whitespace-normal.text-color-heading.text-bold(default-route=`${component.route}-chat`)
    ul
      li.segment.full.padding-small.text-normal.jsOffsiteToggle
        span.icon.icon-arrow-left.icon-xsmall.margin-left-xxsmall.text-left
        span.segment.full.text-right(hidden)
          span.icon.icon-arrow-right.icon-xsmall.margin-right-xxsmall
          a(data-trans='circle.menuRight.fold')
      solid-route.segment.full(name=`${component.route}-chat` use-id)
        li.segment.full.padding-medium
          span.icon.ci-chat.icon-xlarge.margin-right-medium
          a(data-trans='circle.menuRight.chat')
      solid-route.segment.full(name=`${component.route}-information` use-id)
        li.segment.full.padding-medium
          span.icon.ci-information.icon-xlarge.margin-right-medium
          a(data-trans='circle.menuRight.information')
      if extensions.has('resources')
        solid-route.segment.full(name=`${component.route}-resources` use-id)
          li.segment.full.padding-medium
            span.icon.ci-networking.icon-xlarge.margin-right-medium
            a(data-trans='circle.menuRight.resources')
      if extensions.has('events')
        solid-route.segment.full(name=`${component.route}-events` use-id)
          li.segment.full.padding-medium
            span.icon.ci-networking.icon-xlarge.margin-right-medium
            a(data-trans='circle.menuRight.events')
      if extensions.has('polls')
        solid-route.segment.full(name=`${component.route}-polls` use-id)
          li.segment.full.padding-medium
            span.icon.ci-networking.icon-xlarge.margin-right-medium
            a(data-trans='circle.menuRight.polls')