Further updates on 03-11-2025

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

@@ -1,67 +1,172 @@
-<div class="container">
-  <div class="row mb-2 mt-2 text-center">
-    <div class="col-md-4"></div>
-    <div class="col-md-4">
-      <h5>Admin Dashboard</h5>
+<!-- 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 class="col-md-4"></div>
   </div>
 
-  <!-- Navbar -->
-  <nav class="navbar navbar-expand-md breadcrumb">
-    <div class="collapse navbar-collapse" id="navbarCollapse">
-      <div class="nav nav-pills">
-        <a class="nav-item nav-link ml-1" routerLink="/dashboard/home" routerLinkActive="active"
-          (click)="changeTitle('Home')">
-          <i class="fa fa-home"></i>
-          Home
-        </a>
-        <a class="nav-item nav-link ml-1" routerLink="/dashboard/userManagement" routerLinkActive="active"
-          (click)="changeTitle('Users')">
-          <i class="fa fa-users"></i>
-          Users
-        </a>
-        <a class="nav-item nav-link ml-1" routerLink="/dashboard/professorManagement" routerLinkActive="active"
-          (click)="changeTitle('Professors')">
-          <i class="fa fa-chalkboard-teacher"></i>
-          Professors
-        </a>
-        <a class="nav-item nav-link ml-1" routerLink="/dashboard/blogs" routerLinkActive="active"
-          (click)="changeTitle('Blogs')">
-          <i class="fa fa-blog"></i>
-          Blogs
-        </a>
-        <a class="nav-item nav-link ml-1" routerLink="/dashboard/education" routerLinkActive="active"
-          (click)="changeTitle('Education')">
-          <i class="fa fa-graduation-cap"></i>
-          Education
-        </a>
-        <a class="nav-item nav-link ml-1" routerLink="/dashboard/events" routerLinkActive="active"
-          (click)="changeTitle('Events')">
-          <i class="fa fa-calendar"></i>
-          Events
-        </a>
-        <a class="nav-item nav-link ml-1" routerLink="/dashboard/career" routerLinkActive="active"
-          (click)="changeTitle('Career')">
-          <i class="fa fa-briefcase"></i>
-          Careers
-        </a>
-
-        <a class="nav-item nav-link ml-3" routerLink="/dashboard/settings" routerLinkActive="active"
-          (click)="changeTitle('Settings')">
-          <i class="fa fa-cogs"></i>
-          Settings
-        </a>
-        <a class="nav-item nav-link move-right mr-3" routerLink="/dashboard/profile" routerLinkActive="active"
-          (click)="changeTitle('Profile')">
-          Welcome, {{ loggedInUser.firstName }} {{ loggedInUser.lastName }}
-          <i class="fa fa-user"></i>
-        </a>
-        <!-- <a class="nav-item nav-link ml-1" (click)="logout()">
-              <i class="fa fa-sign-out-alt"></i>
-              Logout
-            </a> -->
-      </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>
+
+      <!-- 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>
-</div>
+
+  <!-- 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>