<view class="side-bar-wrapper">
  <t-side-bar value="{{sideBarIndex}}" bind:change="onSideBarChange">
    <t-side-bar-item
      wx:for="{{categories}}"
      wx:key="index"
      value="{{item.value || index}}"
      label="{{item.label}}"
      disabled="{{item.disabled}}"
      badge-props="{{item.badgeProps}}"
    />
  </t-side-bar>
  <view class="content" style="transform: translateY(-{{sideBarIndex * 100}}%)">
    <scroll-view
      wx:for="{{categories}}"
      wx:key="index"
      class="section"
      scroll-y
      scroll-with-animation
      show-scrollbar="{{false}}"
    >
      <view class="title">{{item.title || item.label}}</view>
      <t-cell-group>
        <block wx:for="{{item.items}}" wx:key="index" wx:for-item="cargo">
          <t-cell title="{{cargo.label}}{{index}}">
            <t-image shape="round" src="{{cargo.image}}" slot="image" lazy t-class="image" />
          </t-cell>
        </block>
      </t-cell-group>
    </scroll-view>
  </view>
</view>
