cmc/support-portal-frontend/src/app/component/menu/menu.component.html

<!-- Modern Sidebar Menu -->
<aside class="sidebar">
  <!-- Logo/Brand Section -->
  <div class="sidebar-header">
    <div class="brand">
      <div class="brand-icon">
        <i class="fa fa-graduation-cap"></i>
      </div>
      <h1 class="brand-title">CMC Admin</h1>
    </div>
  </div>

  <!-- User Profile Section -->
  <div class="user-profile">
    <div class="user-avatar">
      <i class="fa fa-user-circle"></i>
    </div>
    <div class="user-info">
      <p class="user-name">{{ loggedInUser.firstName }} {{ loggedInUser.lastName }}</p>
      <span class="user-role">Administrator</span>
    </div>
  </div>

  <!-- Navigation Menu -->
  <nav class="sidebar-nav">
    <ul class="nav-list">
      <!-- Home -->
      <li class="nav-item">
        <a class="nav-link" routerLink="/dashboard/home" routerLinkActive="active" (click)="changeTitle('Home')">
          <span class="nav-icon">
            <i class="fa fa-home"></i>
          </span>
          <span class="nav-text">Dashboard</span>
        </a>
      </li>

      <!-- Users -->
      <li class="nav-item">
        <a class="nav-link" routerLink="/dashboard/userManagement" routerLinkActive="active"
          (click)="changeTitle('Users')">
          <span class="nav-icon">
            <i class="fa fa-users"></i>
          </span>
          <span class="nav-text">Users</span>
        </a>
      </li>

      <!-- Professors -->
      <li class="nav-item">
        <a class="nav-link" routerLink="/dashboard/professorManagement" routerLinkActive="active"
          (click)="changeTitle('Professors')">
          <span class="nav-icon">
            <i class="fa fa-chalkboard-teacher"></i>
          </span>
          <span class="nav-text">Professors</span>
        </a>
      </li>

      <!-- Divider -->
      <li class="nav-divider">
        <span>Content</span>
      </li>

      <!-- Blogs -->
      <li class="nav-item">
        <a class="nav-link" routerLink="/dashboard/blogs" routerLinkActive="active" (click)="changeTitle('Blogs')">
          <span class="nav-icon">
            <i class="fa fa-blog"></i>
          </span>
          <span class="nav-text">Blogs</span>
        </a>
      </li>

      <!--Hero Image-->
      <li class="nav-item">
        <a class="nav-link" routerLink="/dashboard/heroImage" routerLinkActive="active"
          (click)="changeTitle('Hero Image')">
          <span class="nav-icon">
            <i class="fa fa-home"></i>
          </span>
          <span class="nav-text">Hero Image</span>
        </a>
      </li>

      <!-- Service Tiles --> <!-- ← ADD THIS -->
      <li class="nav-item">
        <a class="nav-link" routerLink="/dashboard/serviceTiles" routerLinkActive="active"
          (click)="changeTitle('Service Tiles')">
          <span class="nav-icon">
            <i class="fa fa-th-large"></i>
          </span>
          <span class="nav-text">Service Tiles</span>
        </a>
      </li>

      <!-- Publications -->
      <li class="nav-item">
        <a class="nav-link" routerLink="/dashboard/publications" routerLinkActive="active"
          (click)="changeTitle('Publications')">
          <span class="nav-icon">
            <i class="fa fa-book-open"></i>
          </span>
          <span class="nav-text">Publications</span>
        </a>
      </li>

      <!-- Events -->
      <li class="nav-item">
        <a class="nav-link" routerLink="/dashboard/events" routerLinkActive="active" (click)="changeTitle('Events')">
          <span class="nav-icon">
            <i class="fa fa-calendar"></i>
          </span>
          <span class="nav-text">Events</span>
        </a>
      </li>

      <!-- Milestones -->
      <li class="nav-item">
        <a class="nav-link" routerLink="/dashboard/milestone/list" routerLinkActive="active"
          (click)="changeTitle('Milestones')">
          <span class="nav-icon">
            <i class="fa fa-flag-checkered"></i>
          </span>
          <span class="nav-text">Milestones</span>
        </a>
      </li>

      <!-- Testimonials -->
      <li class="nav-item">
        <a class="nav-link" routerLink="/dashboard/testimonial/list" routerLinkActive="active"
          (click)="changeTitle('Testimonials')">
          <span class="nav-icon">
            <i class="fa fa-star"></i>
          </span>
          <span class="nav-text">Testimonials</span>
        </a>
      </li>

      <!-- Divider -->
      <li class="nav-divider">
        <span>Programs</span>
      </li>

      <!-- Education -->
      <li class="nav-item">
        <a class="nav-link" routerLink="/dashboard/education" routerLinkActive="active"
          (click)="changeTitle('Education')">
          <span class="nav-icon">
            <i class="fa fa-graduation-cap"></i>
          </span>
          <span class="nav-text">Education</span>
        </a>
      </li>

      <!-- Careers -->
      <li class="nav-item">
        <a class="nav-link" routerLink="/dashboard/career" routerLinkActive="active" (click)="changeTitle('Careers')">
          <span class="nav-icon">
            <i class="fa fa-briefcase"></i>
          </span>
          <span class="nav-text">Careers</span>
        </a>
      </li>

      <!-- Divider -->
      <li class="nav-divider">
        <span>System</span>
      </li>

      <!-- Settings -->
      <li class="nav-item">
        <a class="nav-link" routerLink="/dashboard/settings" routerLinkActive="active"
          (click)="changeTitle('Settings')">
          <span class="nav-icon">
            <i class="fa fa-cogs"></i>
          </span>
          <span class="nav-text">Settings</span>
        </a>
      </li>

      <!-- Profile -->
      <li class="nav-item">
        <a class="nav-link" routerLink="/dashboard/profile" routerLinkActive="active" (click)="changeTitle('Profile')">
          <span class="nav-icon">
            <i class="fa fa-user"></i>
          </span>
          <span class="nav-text">Profile</span>
        </a>
      </li>
    </ul>
  </nav>

  <!-- Logout Button -->
  <div class="sidebar-footer">
    <button class="logout-btn" (click)="logout()">
      <i class="fa fa-sign-out-alt"></i>
      <span>Logout</span>
    </button>
  </div>
</aside>