<div class="sidenav-container" fxFlexFill fxLayout="column">
  <div class="title-section" fxFlex="0 0 50px" fxLayout="row">
    <div class="title">
      <h3 fxFlex="1 1 auto">그룹</h3>
      <div class="menu-btn" fxFlex="80px">
        <button
          mat-icon-button
          [matMenuTriggerFor]="groupViewMenu"
          aria-label="group view menu"
        >
          <mat-icon>swap_vert</mat-icon>
        </button>
        <button
          mat-icon-button
          [matMenuTriggerFor]="groupMenu"
          aria-label="group menu"
        >
          <mat-icon>more_vert</mat-icon>
        </button>
      </div>
    </div>
  </div>
  <div class="extra-box" fxFlex="0 0 50px">
    <app-organization-search-for-tenant [(searchData)]="companySearchData">
    </app-organization-search-for-tenant>
  </div>

  <div fxFlex="1 1 auto">
    <app-sections-group-list
      #sectionGroupList
      fxFlexFill
      [searchData]="companySearchData"
      [showType]="showType"
    ></app-sections-group-list>
  </div>
</div>

<mat-menu #groupMenu="matMenu">
  <button mat-menu-item (click)="onClickGroupMenu('GROUP_NEW')">
    {{ 'moreMenu.group.addNew' | ucapI18n }}
  </button>
  <button mat-menu-item (click)="onClickGroupMenu('GROUP_EXPAND_MORE')">
    {{ 'moreMenu.group.expandMore' | ucapI18n }}
  </button>
  <button mat-menu-item (click)="onClickGroupMenu('GROUP_EXPAND_LESS')">
    {{ 'moreMenu.group.expandLess' | ucapI18n }}
  </button>
  <button mat-menu-item (click)="onClickGroupMenu('GROUP_CHANGE_ODER')">
    {{ 'moreMenu.group.changeOrder' | ucapI18n }}
  </button>
</mat-menu>

<mat-menu #groupViewMenu="matMenu">
  <button mat-menu-item (click)="onClickShowGroupMenu('ALL')">
    {{ 'moreMenu.show.all' | ucapI18n }}
  </button>
  <button mat-menu-item (click)="onClickShowGroupMenu('ONLINE_BUDDY')">
    {{ 'moreMenu.show.onlineBuddy' | ucapI18n }}
  </button>
  <button mat-menu-item (click)="onClickShowGroupMenu('ON_OFF')">
    {{ 'moreMenu.show.onOff' | ucapI18n }}
  </button>
</mat-menu>
