iwa_252490/project/frontend-angular/src/app/app.html

<nav>
  <div class="nav-container">
    <div class="nav-brand">
      <div class="brand-logo">
        <div class="logo-icon">W</div>
        <div>
          <div class="brand-text">Better WIKAMP</div>
          <div class="brand-subtitle">Academic Management Platform</div>
        </div>
      </div>

      <ul class="nav-menu">
        <li class="nav-item">
          <a routerLink="/" class="nav-link">Home</a>
        </li>

        @if (authority === 'student') {
          <li class="nav-item">
            <a routerLink="grade-student" class="nav-link">Grades</a>
          </li>
        }

        @if (authority === 'teacher') {
          <li class="nav-item">
            <a routerLink="subjects" class="nav-link">Subjects</a>
          </li>
        }

        @if (authority === 'admin') {
          <li class="nav-item">
            <a routerLink="admin" class="nav-link">Manage Accounts</a>
          </li>
          <li class="nav-item">
            <a routerLink="auth/signup" class="nav-link">Add Accounts</a>
          </li>
        }

        @if (!authority) {
          <li class="nav-item">
            <a routerLink="auth/signin" class="nav-link primary">Login</a>
          </li>
        }

        @if (authority) {
          <li class="nav-item">
            <a (click)="logout()" class="nav-link">Logout</a>
          </li>
        }

        @if (authority && loggedUser) {
          <li class="nav-item">
            <span class="user-info">
              Logged in as: <span class="user-name">{{ loggedUser }}</span>
            </span>
          </li>
        }
      </ul>
    </div>
  </div>
</nav>

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