<ion-header [translucent]="true">
   <ion-toolbar>
    <ion-buttons slot="end">
     <ion-button (click)="openSearch()" class="search-button">
      <ion-icon name="search" slot="icon-only"></ion-icon>
     </ion-button>
    </ion-buttons>

    <ion-segment [(ngModel)]="selectedSegment" (ionChange)="segmentChanged($event)" class="custom-segment">
     <ion-segment-button value="collection" class="segment-button">
      <ion-label>分类</ion-label>
     </ion-segment-button>
     <ion-segment-button value="works" class="segment-button">
      <ion-label>作品</ion-label>
     </ion-segment-button>
     <ion-segment-button value="authors" class="segment-button">
      <ion-label>作者</ion-label>
     </ion-segment-button>
    </ion-segment>
   </ion-toolbar>
  </ion-header>

  <ion-content [fullscreen]="true">
   <ng-container *ngIf="selectedSegment === 'collection'">
    <ion-grid>
     <ion-col size="2" class="fixed-sidebar">
      <ion-list>
       <ion-item button *ngFor="let category of categories" (click)="selectCategory(category)">
        <ion-label>{{ category }}</ion-label>
       </ion-item>
      </ion-list>
     </ion-col>
     <ion-col size="10" class="scrollable-content">
      <div class="book-cards-container">
       <ion-card *ngFor="let book of filteredBooks" (click)="selectBook(book)" class="book-card">
        <ion-card-header>
         <ion-card-title>{{ book.title }}</ion-card-title>
        </ion-card-header>
        <ion-card-content>
         <p>{{ book.count }} 个条目</p >
        </ion-card-content>
       </ion-card>
      </div>
     </ion-col>
    </ion-grid>
   </ng-container>

   <ng-container *ngIf="selectedSegment === 'works' || selectedSegment === 'authors'">
    <div class="blank-page">
     <p *ngIf="selectedSegment === 'works'">这里是作品页面的内容。</p >
     <p *ngIf="selectedSegment === 'authors'">这里是作者页面的内容。</p >
    </div>
   </ng-container>
  </ion-content>
  <ion-header [translucent]="true">
   <ion-toolbar>
    <ion-buttons slot="end">
