# 侧边栏菜单样式

#### 场景介绍

从6.0.0(20)版本开始，新增支持设置侧边栏菜单样式。

HdsSideMenu提供一种菜单栏样式组件。设置侧边栏对应的一级菜单和二级菜单，并显示其新消息数量。

#### 开发步骤

1.  导入相关模块。
    
    ```
    import { HdsSideMenu, HdsSideMenuMainItem, HdsSideMenuSubItem, HdsSideMenuBadgeParam, HdsSideBar } from '@kit.UIDesignKit';
    import { SymbolGlyphModifier } from '@kit.ArkUI';
    ```
    
2.  设置对应的一级菜单和二级菜单，并显示其新消息数量。
    
    ```
    @Entry
    @ComponentV2
    struct Index {
      @Local showControlButton: boolean = true;
      @Local sideBarMask: boolean = false;
      @Local autoHide: boolean = true;
      @Local barStateTypeText: string = 'Select BarState';
      @Local widthIndex: number = 0;
      @Local badgeNumber: HdsSideMenuBadgeParam = { count: 50 };
      @Local useTheme: boolean = false;
      @Local selectedIndex: number = 2;
      @Local selectedTransparency: number = 0.6;
      @Local str: string = '短信';
      @Local isShowSidebar: boolean = true;
      listOptionsDefault?: HdsSideMenuMainItem[] = [
        new HdsSideMenuMainItem(
          {
            symbol: new SymbolGlyphModifier($r('sys.symbol.ohos_folder_badge_plus')).fontSize(14),
            label: $r('sys.string.TextView_engr_phone')
          }),
        new HdsSideMenuMainItem({
          icon: $r('sys.symbol.person_wave_3'),
          label: 'Tuesday',
          hdsSideMenuSubItem: [
            new HdsSideMenuSubItem({ label: this.str, badge: this.badgeNumber })],
        }),
        new HdsSideMenuMainItem({
          symbol: new SymbolGlyphModifier($r('sys.symbol.person_crop_circle_fill_1')),
          label: 'Wednesday'
        }),
      ]
      @Builder
      SideBarPanelBuilder() {
        Column() {
          HdsSideMenu({
            items: this.listOptionsDefault,
            selectedIndex: this.selectedIndex,
            $selectedIndex: (selectedIndex: number) => {
              this.selectedIndex = selectedIndex
            }
          })
        }
        .height('100%')
      }
      // 右侧内容区
      @Builder
      ContentPanelBuilder() {
        Column() {
          Column() {
            Button() {
              SymbolGlyph(this.isShowSidebar ? $r('sys.symbol.open_sidebar') : $r('sys.symbol.close_sidebar'))
                .fontWeight(FontWeight.Normal)
                .fontSize($r('sys.float.ohos_id_text_size_headline7'))
                .fontColor([$r('sys.color.ohos_id_color_titlebar_icon')])
                .hitTestBehavior(HitTestMode.None)
            }
            .backgroundColor($r('sys.color.ohos_id_color_button_normal'))
            .height(24)
            .width(24)
            .animation({ curve: Curve.Sharp, duration: 100 })
            .onClick(() => {
              this.isShowSidebar = !this.isShowSidebar;
            })
          }
        }
        .height('100%')
        .width('100%')
      }
      @BuilderParam sideBarBuilder: () => void = this.SideBarPanelBuilder
      @BuilderParam contentBuilder: () => void = this.ContentPanelBuilder
      @Builder
      build() {
        Column() {
          HdsSideBar({
            sideBarPanelBuilder: (): void => {
              this.sideBarBuilder()
            },
            contentPanelBuilder: (): void => {
              this.contentBuilder()
            },
            isShowSideBar: this.isShowSidebar,
            $isShowSideBar: (isShowSidebar: boolean) => {
              this.isShowSidebar = !isShowSidebar
            }
          })
        }
      }
    }
    ```