<div class="app-shell">
  <aside class="sidebar">
    <div class="sidebar-logo">
      <hugeicons-icon [icon]="ZapIcon" [size]="22" [strokeWidth]="1.5" color="var(--accent)" />
      <span class="logo-text">ApexStore</span>
      <span class="badge badge-warning" style="font-size:0.65rem">v{{ VERSION }}</span>
    </div>

    <nav class="sidebar-nav">
      @for (group of navGroups(); track group.label) {
        <div class="nav-group-label">{{ group.label }}</div>
        @for (item of group.items; track item.path) {
          <a [routerLink]="item.path" routerLinkActive="active" class="nav-item">
            <span class="nav-icon">
              <hugeicons-icon [icon]="item.icon" [size]="17" [strokeWidth]="1.5" />
            </span>
            <span>{{ item.label }}</span>
          </a>
        }
      }
    </nav>

    <div class="sidebar-footer">
      <a [href]="DOCUMENTATION_URL" target="_blank" class="nav-item">
        <span class="nav-icon">
          <hugeicons-icon [icon]="BookOpenIcon" [size]="17" [strokeWidth]="1.5" />
        </span>
        <span>Documentation</span>
      </a>
      <a href="https://github.com/ElioNeto/ApexStore" target="_blank" class="nav-item">
        <span class="nav-icon">
          <hugeicons-icon [icon]="GithubIcon" [size]="17" [strokeWidth]="1.5" />
        </span>
        <span>GitHub</span>
      </a>
    </div>
  </aside>

  <main class="main-content">
    <router-outlet />
  </main>
</div>
<app-toast />
