fix(side-bar): update the example (#3251)

* fix(side-bar): update the example

* test(side-bar): update the example

Author: betavs

src/side-bar/__test__/__snapshots__/demo.test.js.snap

@@ -2,11 +2,15 @@
 
 exports[`SideBar SideBar base demo works fine 1`] = `
 <base>
-  <t-navbar
-    class="demo-navbar"
-    leftArrow="{{true}}"
-    title="TDesign"
-  />
+  <wx-view
+    class="custom-navbar"
+  >
+    <t-navbar
+      class="demo-navbar"
+      leftArrow="{{true}}"
+      title="TDesign"
+    />
+  </wx-view>
   <wx-view
     class="side-bar-wrapper"
     style="height: calc(100vh - 0px)"
@@ -523,11 +527,15 @@ exports[`SideBar SideBar base demo works fine 1`] = `
 
 exports[`SideBar SideBar custom demo works fine 1`] = `
 <custom>
-  <t-navbar
-    class="demo-navbar"
-    leftArrow="{{true}}"
-    title="TDesign"
-  />
+  <wx-view
+    class="custom-navbar"
+  >
+    <t-navbar
+      class="demo-navbar"
+      leftArrow="{{true}}"
+      title="TDesign"
+    />
+  </wx-view>
   <wx-view
     class="side-bar-wrapper"
     style="height: calc(100vh - 0px)"
@@ -1044,11 +1052,15 @@ exports[`SideBar SideBar custom demo works fine 1`] = `
 
 exports[`SideBar SideBar switch demo works fine 1`] = `
 <wx-switch>
-  <t-navbar
-    class="demo-navbar"
-    leftArrow="{{true}}"
-    title="TDesign"
-  />
+  <wx-view
+    class="custom-navbar"
+  >
+    <t-navbar
+      class="demo-navbar"
+      leftArrow="{{true}}"
+      title="TDesign"
+    />
+  </wx-view>
   <wx-view
     class="side-bar-wrapper"
     style="height: calc(100vh - 0px)"
@@ -1577,11 +1589,15 @@ exports[`SideBar SideBar switch demo works fine 1`] = `
 
 exports[`SideBar SideBar with-icon demo works fine 1`] = `
 <with-icon>
-  <t-navbar
-    class="demo-navbar"
-    leftArrow="{{true}}"
-    title="TDesign"
-  />
+  <wx-view
+    class="custom-navbar"
+  >
+    <t-navbar
+      class="demo-navbar"
+      leftArrow="{{true}}"
+      title="TDesign"
+    />
+  </wx-view>
   <wx-view
     class="side-bar-wrapper"
     style="height: calc(100vh - 0px)"

src/side-bar/_example/base/index.wxml

@@ -1,4 +1,6 @@
-<t-navbar class="demo-navbar" title="TDesign" leftArrow />
+<view class="custom-navbar">
+  <t-navbar class="demo-navbar" title="TDesign" leftArrow />
+</view>
 
 <view class="side-bar-wrapper" style="height: calc(100vh - {{navbarHeight}}px)">
   <t-side-bar value="{{sideBarIndex}}" bind:change="onSideBarChange">
@@ -14,7 +16,7 @@
     <view wx:for="{{categories}}" wx:key="index" class="section">
       <view class="title">{{item.title || item.label}}</view>
       <t-grid column="{{3}}" border="{{false}}">
-        <block wx:for="{{item.items}}" wx:key="label" wx:for-item="cargo">
+        <block wx:for="{{item.items}}" wx:key="index" wx:for-item="cargo">
           <t-grid-item
             text="{{cargo.label}}"
             image="{{cargo.image}}"

src/side-bar/_example/custom/index.wxml

@@ -1,4 +1,6 @@
-<t-navbar class="demo-navbar" title="TDesign" leftArrow />
+<view class="custom-navbar">
+  <t-navbar class="demo-navbar" title="TDesign" leftArrow />
+</view>
 
 <view class="side-bar-wrapper" style="height: calc(100vh - {{navbarHeight}}px)">
   <t-side-bar value="{{sideBarIndex}}" bind:change="onSideBarChange">
@@ -14,7 +16,7 @@
     <view wx:for="{{categories}}" wx:key="index" class="section">
       <view class="title">{{item.title || item.label}}</view>
       <t-grid column="{{3}}" border="{{false}}">
-        <block wx:for="{{item.items}}" wx:key="label" wx:for-item="cargo">
+        <block wx:for="{{item.items}}" wx:key="index" wx:for-item="cargo">
           <t-grid-item
             text="{{cargo.label}}"
             image="{{cargo.image}}"

src/side-bar/_example/switch/index.wxml

@@ -1,4 +1,6 @@
-<t-navbar class="demo-navbar" title="TDesign" leftArrow />
+<view class="custom-navbar">
+  <t-navbar class="demo-navbar" title="TDesign" leftArrow />
+</view>
 
 <view class="side-bar-wrapper" style="height: calc(100vh - {{navbarHeight}}px)">
   <t-side-bar value="{{sideBarIndex}}" bind:change="onSideBarChange">

src/side-bar/_example/with-icon/index.wxml

@@ -1,4 +1,6 @@
-<t-navbar class="demo-navbar" title="TDesign" leftArrow />
+<view class="custom-navbar">
+  <t-navbar class="demo-navbar" title="TDesign" leftArrow />
+</view>
 
 <view class="side-bar-wrapper" style="height: calc(100vh - {{navbarHeight}}px)">
   <t-side-bar value="{{sideBarIndex}}" bind:change="onSideBarChange">