feat: add admin panel

src/pages/admin/admin.component.css

@@ -0,0 +1,28 @@
+mat-sidenav-container {
+  min-height: 100vh;
+}
+
+mat-sidenav {
+  width: auto;
+  min-width: 200px;
+  max-width: 20vw;
+}
+
+mat-nav-list a {
+  display: flex;
+  align-items: center;
+  text-decoration: none;
+  padding: 10px 16px;
+  border-radius: 4px;
+
+  mat-icon {
+    margin-right: 16px;
+    font-size: 24px;
+    vertical-align: middle;
+    line-height: 1;
+  }
+}
+
+.active-link {
+  backdrop-filter: contrast(75%);
+}

src/pages/admin/admin.component.html

@@ -0,0 +1,21 @@
+<mat-card *appHasRole="AuthRoles.Admin">
+  <mat-sidenav-container>
+    <mat-sidenav mode="side" opened>
+      <mat-nav-list>
+        @for (link of navLinks; track $index) {
+          <a
+            mat-list-item
+            [class.active-link]="isActive(link.route)"
+            (click)="navigate(link.route)"
+            [disabled]="isActive(link.route)">
+            <mat-icon>{{ link.icon }}</mat-icon>
+            <span>{{ link.label }}</span>
+          </a>
+        }
+      </mat-nav-list>
+    </mat-sidenav>
+    <mat-sidenav-content>
+      <router-outlet></router-outlet>
+    </mat-sidenav-content>
+  </mat-sidenav-container>
+</mat-card>

src/pages/admin/admin.component.ts

@@ -0,0 +1,59 @@
+import {Component} from '@angular/core';
+import {MatCard} from "@angular/material/card";
+import {MatSidenavModule} from "@angular/material/sidenav";
+import {HasRoleDirective} from "@/directives/has-role.directive";
+import {Router, RouterOutlet} from "@angular/router";
+import AuthApiService from "@api/v1/authApi.service";
+import {MatListItem, MatNavList} from "@angular/material/list";
+import {AuthRoles} from "@model/authRoles";
+import {MatIcon} from "@angular/material/icon";
+
+@Component({
+  selector: 'app-admin',
+  standalone: true,
+  imports: [
+    MatCard,
+    HasRoleDirective,
+    MatNavList,
+    MatSidenavModule,
+    RouterOutlet,
+    MatListItem,
+    MatIcon,
+  ],
+  templateUrl: './admin.component.html',
+  styleUrl: './admin.component.css',
+  providers: [AuthApiService]
+})
+export class AdminComponent {
+  navLinks = [
+    {label: 'Расписание', route: 'schedule', icon: 'calendar_month'},
+    {label: 'Институт', route: 'institute', icon: 'school'},
+    {label: 'Аккаунт', route: 'account', icon: 'person'},
+    {label: 'Сервер', route: 'server', icon: 'settings'},
+  ];
+
+  constructor(private auth: AuthApiService, private router: Router) {
+    this.auth.getRole()
+      .subscribe(data => {
+        if (data === null)
+          router.navigate(['login']).then();
+      });
+  }
+
+  isActive(route: string): boolean {
+    return this.router.isActive(`/admin/${route}`, {
+      paths: 'exact',
+      queryParams: 'ignored',
+      fragment: 'ignored',
+      matrixParams: 'ignored',
+    });
+  }
+
+  navigate(route: string): void {
+    if (!this.isActive(route)) {
+      this.router.navigate([`/admin/${route}`]).then();
+    }
+  }
+
+  protected readonly AuthRoles = AuthRoles;
+}