refs:
  list: {}
  headerImage:
    eventListeners:
      click:
        handler: handleHeaderClick
  headerLabel:
    eventListeners:
      click:
        handler: handleHeaderClick
  header:
    eventListeners:
      click:
        handler: handleHeaderClick
  item*:
    eventListeners:
      click:
        handler: handleItemClick
      mouseenter:
        handler: handleItemMouseEnter
      mouseleave:
        handler: handleItemMouseLeave
anchors:
  - - $if header.image && header.image.src:
        - $if header.image.href:
            - a href=${header.image.href}:
                - rtgl-image w=${header.image.width} h=${header.image.height} src=${header.image.src} alt="${header.image.alt}": null
          $elif header.image.path:
            - rtgl-view#headerImage cur=pointer:
                - rtgl-image w=${header.image.width} h=${header.image.height} src=${header.image.src} alt="${header.image.alt}": null
          $else:
            - rtgl-image w=${header.image.width} h=${header.image.height} src=${header.image.src} alt="${header.image.alt}": null
    - $if header.label && showLabels:
        - $if header.labelHref:
            - rtgl-text href=${header.labelHref} s=lg: ${header.label}
          $elif header.labelPath:
            - rtgl-view#headerLabel cur=pointer:
                - rtgl-text s=lg: ${header.label}
          $else:
            - rtgl-text s=lg: ${header.label}
template:
  - rtgl-view h=f w=${sidebarWidth} d=v bwr=${rightBorderWidth} ah=${ah} ${containerAttrString}:
      - $if showHeader:
          - rtgl-view ph=${headerPadding} pv=lg:
              - $if header.href:
                  - rtgl-view href=${header.href} d=h av=c ah=${headerAlign} g=lg w=${headerWidth}:
                      - - $if header.image && header.image.src:
                            - $if header.image.href:
                                - a href=${header.image.href}:
                                    - rtgl-image w=${header.image.width} h=${header.image.height} src=${header.image.src} alt="${header.image.alt}": null
                              $elif header.image.path:
                                - rtgl-view#headerImage cur=pointer:
                                    - rtgl-image w=${header.image.width} h=${header.image.height} src=${header.image.src} alt="${header.image.alt}": null
                              $else:
                                - rtgl-image w=${header.image.width} h=${header.image.height} src=${header.image.src} alt="${header.image.alt}": null
                        - $if header.label && showLabels:
                            - $if header.labelHref:
                                - rtgl-text href=${header.labelHref} s=lg: ${header.label}
                              $elif header.labelPath:
                                - rtgl-view#headerLabel cur=pointer:
                                    - rtgl-text s=lg: ${header.label}
                              $else:
                                - rtgl-text s=lg: ${header.label}
                $else:
                  - rtgl-view#header d=h av=c ah=${headerAlign} g=lg w=${headerWidth} cur=pointer data-testid=${header.testId}:
                      - - $if header.image && header.image.src:
                            - $if header.image.href:
                                - a href=${header.image.href}:
                                    - rtgl-image w=${header.image.width} h=${header.image.height} src=${header.image.src} alt="${header.image.alt}": null
                              $elif header.image.path:
                                - rtgl-view#headerImage cur=pointer:
                                    - rtgl-image w=${header.image.width} h=${header.image.height} src=${header.image.src} alt="${header.image.alt}": null
                              $else:
                                - rtgl-image w=${header.image.width} h=${header.image.height} src=${header.image.src} alt="${header.image.alt}": null
                        - $if header.label && showLabels:
                            - $if header.labelHref:
                                - rtgl-text href=${header.labelHref} s=lg: ${header.label}
                              $elif header.labelPath:
                                - rtgl-view#headerLabel cur=pointer:
                                    - rtgl-text s=lg: ${header.label}
                              $else:
                                - rtgl-text s=lg: ${header.label}
      - rtgl-view#list w=f h=1fg ph=${headerPadding} pb=lg g=xs ah=${ah} ${listAttrString}:
          - $for item, i in items:
              - $if item.type == "divider":
                  - rtgl-view w=f pv=md:
                      - rtgl-view h=1 w=f bgc=mu: null
                $elif item.type == "spacer":
                  - rtgl-view h=1fg w=f: null
                $elif item.type == "groupLabel":
                  - $if showGroupLabels:
                      - rtgl-view mt=md h=32 av=c ph=md:
                          - rtgl-text s=xs c=mu-fg: ${item.label}
                    $else:
                      - rtgl-view mt=md h=1 bgc=mu: null
                $else:
                  - rtgl-view#item${i} data-item-id=${item.id} ${item.hrefAttr} h=${itemHeight} av=c ${itemAlignAttr} ph=${itemPadding} w=${itemWidth} h-bgc=${item.itemHoverBgc} br=lg bgc=${item.itemBgc} cur=pointer data-testid=${item.testId} aria-label="${item.label}":
                      - $if item.icon:
                          - $if showLabels:
                              - rtgl-view d=h ah=${itemContentAlign} g=sm:
                                  - rtgl-svg wh=16 svg=${item.icon} c=fg: null
                                  - rtgl-text s=sm: ${item.label}
                            $else:
                              - rtgl-svg wh=${iconSize} svg=${item.icon} c=fg: null
                        $else:
                          - $if showLabels:
                              - rtgl-text s=sm: ${item.label}
                            $else:
                              - rtgl-view wh=${iconSize} br=f bgc=mu av=c ah=c:
                                  - rtgl-text s=${firstLetterSize} c=fg: ${item.label.charAt(0).toUpperCase()}
      - $if enableCompactTooltip:
          - rtgl-tooltip#tooltip s="md" ?open=${tooltipState.open} x=${tooltipState.x} y=${tooltipState.y} place=${tooltipState.place} content="${tooltipState.content}": null