How to Exit Slide-Out Mode When Clicking on a Blank Area

@Entry
@Component
struct SideBarContainerDemo {
  @State arr: number[] = [1, 2, 3]
  @State current: number = 1
  @State showSideBar: boolean = false
  @State showFlag: Visibility = Visibility.Hidden;

  // Delay closing the sidebar to allow custom entrance animations to display.
  cancel() {
    this.showFlag = Visibility.Hidden
    setTimeout(() => {
      this.showSideBar = !this.showSideBar
    }, 1000)
  }

  build() {
    // Set the type of SideBarContainer to Overlay. 
    SideBarContainer(SideBarContainerType.Overlay) {
      Column() {
        ForEach(this.arr, (item: number) => {
          Column({ space: 5 }) {
            Text('Index0' + item)
              .fontSize(25)
              .fontColor(this.current === item ? '#0A59F7' : '#999')
              .fontFamily('source-sans-pro,cursive,sans-serif')
          }
          .onClick(() => {
            this.current = item
          })
        }, (item: string) => item)
      }
      .visibility(this.showFlag)
      // Customize entrance animations through transition 
      .transition(TransitionEffect.OPACITY
        .animation({ duration: 1000 })
        .combine(TransitionEffect.translate({ x: 100 })))
      .width('100%')
      .justifyContent(FlexAlign.SpaceEvenly)
      .backgroundColor('#ffa2cdff')

      Column() {
        Button('Open the sidebar').onClick(() => {
          this.showFlag = Visibility.Visible
          this.showSideBar = true
        })
          .margin({ top: 16, bottom: 16 })
        Button('Close the sidebar').onClick(() => {
          this.cancel()
        })
      }.height('100%')
      // Click on a blank area to exit the slide-out state.
      .onClick(() => {
        this.cancel()
      })
    }
    .divider(null)
    .sideBarPosition(SideBarPosition.End)
    // Whether to display the sidebar
    .showSideBar(this.showSideBar)
    .showControlButton(false)
    .sideBarWidth(150)
    .minSideBarWidth(50)
    .maxSideBarWidth(300)
    .minContentWidth(0)
    .onChange((value: boolean) => {
      console.info('status:' + value)
    })
  }
}