<div class="hr-layout-container">
  <!-- 侧边导航栏 -->
  <mat-sidenav-container class="sidenav-container">
    <mat-sidenav #sidenav mode="side" [opened]="true" class="sidenav" [class.expanded]="isExpanded" [class.collapsed]="!isExpanded">
      <!-- 导航栏头部 -->
      <div class="sidenav-header">
        <div class="logo-container">
          <img *ngIf="isExpanded" src="assets/images/hr-logo.svg" alt="HR Logo" class="hr-logo">
          <img *ngIf="!isExpanded" src="assets/images/hr-icon.svg" alt="HR Icon" class="hr-icon">
        </div>
        <h2 *ngIf="isExpanded" class="sidenav-title">人事管理</h2>
      </div>

      <!-- 导航菜单 -->
      <mat-nav-list class="nav-list">
        <!-- 人事看板 -->
        <a mat-list-item routerLink="/hr/dashboard" routerLinkActive="active-link">
          <mat-icon matListItemIcon>dashboard</mat-icon>
          <span matListItemTitle *ngIf="isExpanded">人事看板</span>
        </a>

        <!-- 员工信息管理 -->
        <a mat-list-item routerLink="/hr/employee-records" routerLinkActive="active-link">
          <mat-icon matListItemIcon>people</mat-icon>
          <span matListItemTitle *ngIf="isExpanded">员工信息管理</span>
        </a>



        <!-- 考勤统计 -->
        <a mat-list-item routerLink="/hr/attendance" routerLinkActive="active-link">
          <mat-icon matListItemIcon>event_note</mat-icon>
          <span matListItemTitle *ngIf="isExpanded">考勤统计</span>
        </a>




      </mat-nav-list>

      <!-- 导航栏底部 -->
      <div class="sidenav-footer">
        <button mat-icon-button (click)="toggleSidenav()" matTooltip="{{isExpanded ? '收起菜单' : '展开菜单'}}">
          <mat-icon>{{isExpanded ? 'chevron_left' : 'chevron_right'}}</mat-icon>
        </button>
      </div>
    </mat-sidenav>

    <!-- 主内容区 -->
    <mat-sidenav-content class="sidenav-content">
      <router-outlet></router-outlet>
    </mat-sidenav-content>
  </mat-sidenav-container>
</div>