<ion-header [translucent]="true" class="ion-no-border">
  <ion-toolbar>
    <div class="header-container">
      <ion-menu-button class="menu-icon"></ion-menu-button>
      <div class="nav-links">
        <span class="nav-item" (click)="red_underline('关注')" data-id="关注">关注</span>
        <span class="nav-item" (click)="red_underline('发现')" data-id="发现">发现</span>
        <span class="nav-item" (click)="red_underline('附近')" data-id="附近">附近</span>
      </div>
      <ion-icon name="search-outline" class="search-icon"></ion-icon>
    </div>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true" [scrollY]="true">
  <!-- 分类导航 -->
  <div class="category-nav">
    <ion-toolbar>
      <ion-tabs>
        <ion-tab-bar slot="top">
          <ion-tab-button tab="home">
            <ion-label>推荐</ion-label>
          </ion-tab-button>
          <ion-tab-button tab="psychology">
            <ion-label>视频</ion-label>
          </ion-tab-button>
          <ion-tab-button tab="course">
            <ion-label>绘画</ion-label>
          </ion-tab-button>
          <ion-tab-button tab="test">
            <ion-label>穿搭</ion-label>
          </ion-tab-button>
          <ion-tab-button tab="ebook">
            <ion-label>舞蹈</ion-label>
          </ion-tab-button>
        </ion-tab-bar>
      </ion-tabs>
    </ion-toolbar>
  </div>

  <!-- 内容网格 -->
  <div class="content-grid">
    @for(artwork of artworks; track artwork.id) {
    <div class="content-card" (click)="goToDetail(artwork.id)">
      <img [src]="artwork.image" [alt]="artwork.title" class="card-image">
      <div class="card-content">
        <div class="title">{{artwork.title}}</div>
        <div class="description">{{artwork.description}}</div>
        <div class="user-info">
          <div class="user">
            <img [src]="artwork.avatarUrl" [alt]="artwork.userName" class="avatar">
            <div class="info">
              <span class="name" style="font-size: 12px;">{{artwork.userName}}</span>
              <span class="date">{{artwork.date}}</span>
            </div>
          </div>
          <div class="likes">
            <ion-icon name="heart-outline"></ion-icon>
            <span>{{artwork.likes}}</span>
          </div>
        </div>
      </div>
    </div>
    }
  </div>
</ion-content>

<!-- 添加侧边菜单 -->
<ion-menu contentId="main-content" side="start">
  <ion-content class="menu-content">
    <div class="menu-header">
      <h2>个人中心</h2>
    </div>

    <ion-list lines="none">
      <ion-item button detail>
        <ion-icon name="create-outline" slot="start"></ion-icon>
        <ion-label>创作中心</ion-label>
      </ion-item>

      <ion-item button detail>
        <ion-icon name="document-outline" slot="start"></ion-icon>
        <ion-label>我的草稿</ion-label>
      </ion-item>

      <ion-item button detail>
        <ion-icon name="chatbubble-outline" slot="start"></ion-icon>
        <ion-label>我的评论</ion-label>
      </ion-item>

      <ion-item button detail>
        <ion-icon name="heart-outline" slot="start"></ion-icon>
        <ion-label>我的收藏</ion-label>
      </ion-item>

      <ion-item button detail>
        <ion-icon name="time-outline" slot="start"></ion-icon>
        <ion-label>浏览记录</ion-label>
      </ion-item>

    </ion-list>
  </ion-content>
</ion-menu>

<!-- 主内容区域添加 id -->
<div class="ion-page" id="main-content">
  <!-- 其他内容持不变 -->
</div>