<script setup lang="ts">
import { workspaceGroups, workspaces } from "../workspaceRegistry";
</script>

<template>
  <aside class="sidebar">
    <div class="brand">
      <span class="brand-mark">复</span>
      <span class="brand-name">小白复盘</span>
    </div>
    <nav class="sidebar-nav" aria-label="主导航">
      <template v-for="group in workspaceGroups" :key="group">
        <div class="nav-group-label">{{ group }}</div>
        <RouterLink
          v-for="workspace in workspaces.filter((item) => item.group === group)"
          :key="workspace.key"
          class="nav-item"
          :to="`/workspace/${workspace.key}`"
        >
          <span class="nav-mark" aria-hidden="true">{{ workspace.mark }}</span>
          <span>{{ workspace.title }}</span>
        </RouterLink>
      </template>
    </nav>
  </aside>
</template>
