Function Sidebar

src/sidebar.tsx:60–110

(props: SidebarProps)

}

export default function Sidebar(props: SidebarProps) {
  return (
    <side-bar
      style={{
        maxWidth: 250,
        minWidth: 200,
      }}
    >
      <scroll-view
        disableDefaultDocumentView
        style={{
          width: "100%",
          height: "100%",
        }}
      >
        <outline
          onItemSelected={(event) => {
            props.onSelectedItemChange(
              event.item.getAttribute("data-item") as unknown as SidebarItem
            );
          }}
        >
          <For each={sidebarItemsData[props.selectedView]}>
            {(item, _index) => (
              <table-cell
                selected={props.selectedItem?.id === item.id}
                data-item={item}
                identifier={item.id}
              >
                <image symbol={item.icon} />
                <text>{item.title}</text>
                <For each={item.children}>
                  {(child, _index) => (
                    <table-cell
                      selected={props.selectedItem?.id === child.id}
                      identifier={item.id}
                      data-item={child}
                    >
                      <image symbol={child.icon} />
                      <text>{child.title}</text>
                    </table-cell>
                  )}
                </For>
              </table-cell>
            )}
          </For>
        </outline>
      </scroll-view>
    </side-bar>
  );
}