Commit, da geht was nicht gespeichert

angular.json

@@ -31,11 +31,10 @@
             ],
             "styles": [
               "node_modules/datatables.net-dt/css/jquery.datatables.css",
-              "./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
+              "node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
               "node_modules/@angular-architects/paper-design/assets/css/bootstrap.css",
               "node_modules/@angular-architects/paper-design/assets/scss/paper-dashboard.scss",
-              "src/styles.scss",
+              "src/styles.scss"
-              "node_modules/datatables.net-dt/css/jquery.dataTables.min.css"
             ],
             "scripts": [
               "node_modules/jquery/dist/jquery.js",

package-lock.json

@@ -28,6 +28,7 @@
         "datatables.net": "^1.11.3",
         "datatables.net-dt": "^1.11.3",
         "jquery": "^3.6.0",
+        "moment": "^2.29.4",
         "rxjs": "~7.4.0",
         "tslib": "^2.3.0",
         "zone.js": "~0.11.4"
@@ -8272,6 +8273,14 @@
         "node": ">=10"
       }
     },
+    "node_modules/moment": {
+      "version": "2.29.4",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz",
+      "integrity": "sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==",
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@@ -18098,6 +18107,11 @@
       "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==",
       "dev": true
     },
+    "moment": {
+      "version": "2.29.4",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz",
+      "integrity": "sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w=="
+    },
     "ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",

package.json

@@ -30,6 +30,7 @@
     "datatables.net": "^1.11.3",
     "datatables.net-dt": "^1.11.3",
     "jquery": "^3.6.0",
+    "moment": "^2.29.4",
     "rxjs": "~7.4.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.11.4"

src/app/Gruppe.ts

@@ -0,0 +1,7 @@
+export class Gruppe {
+    groupid?: number;
+    groupname?: string;
+    date_started?: Date;
+    date_end?: Date;
+    Anmerkung?: string;
+}

src/app/app.module.ts

@@ -47,6 +47,12 @@ import { PruefungsergebnisComponent } from './pruefungsergebnis/pruefungsergebni
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import {MatTabsModule} from '@angular/material/tabs';
 import {MatRadioModule} from '@angular/material/radio';
+import { MatNativeDateModule } from '@angular/material/core';
+import { GruppenComponent } from './gruppen/gruppen.component';
+import {MatSidenavModule} from '@angular/material/sidenav';
+import {MatToolbarModule} from '@angular/material/toolbar';
+import {MatListModule} from '@angular/material/list';
+
 @NgModule({
    imports: [
       HttpClientModule,
@@ -71,7 +77,10 @@ import {MatRadioModule} from '@angular/material/radio';
       MatSelectModule,
       MatDatepickerModule,
       MatTabsModule,
-      MatRadioModule
+      MatRadioModule,
+      MatSidenavModule,
+      MatToolbarModule,
+      MatListModule
    ],
    declarations: [
       AppComponent,
@@ -95,7 +104,8 @@ import {MatRadioModule} from '@angular/material/radio';
       DashComponent,
       LoginComponent,
       PrergebnisComponent,
-      PruefungsergebnisComponent
+      PruefungsergebnisComponent,
+      GruppenComponent
    ],
    providers: [],
    bootstrap: [

src/app/app.routes.ts

@@ -14,6 +14,7 @@ import { Lehrling2berufComponent } from "./lehrling2beruf/lehrling2beruf.compone
 import { DashComponent } from "./dash/dash.component";
 import { LoginComponent } from "./login/login.component";
 import { PrergebnisComponent } from "./prergebnis/prergebnis.component";
+import { GruppenComponent } from "./gruppen/gruppen.component";
 
 export const APP_ROUTES: Routes = [
     {
@@ -38,6 +39,10 @@ export const APP_ROUTES: Routes = [
         path: 'list-lehrling',
         component: ListLehrlingeComponent
     },
+    {
+        path: 'gruppen',
+        component: GruppenComponent
+    },
     {
         path: 'editLehrling/:id',
         component: EditLehrlingeComponent

src/app/dash/dash.component.css

@@ -8,3 +8,21 @@
     width: 100%;
   }
 
+  .demo-table {
+    width: 100%;
+  }
+  
+  .row-is-clicked {
+    color: red;
+    background: #472ddb;
+    font-weight: bold;
+  }
+  
+  .mat-row.hovered {
+    background: rgb(228, 238, 255);
+}
+
+.mat-row.highlighted {
+  background: #d04b2d;
+  font-weight: bold;
+}

src/app/dash/dash.component.html

@@ -39,7 +39,10 @@
                 </ng-container>
 
             <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-            <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+            <tr mat-row *matRowDef="let row; columns: displayedColumns;"
+                (click)="onclick(row)" (change)="selectHandler(row)"
+                [ngClass]="{hovered: row.hovered, highlighted: selection.isSelected(row)}"
+                (mouseover)="row.hovered = true" (mouseout)="row.hovered = false"></tr>
         </table>
 
         <mat-paginator #paginator
@@ -52,7 +55,7 @@
     </div>
     
     <div class="container col-md-8 mat-elevation-z8 bg-white" id="lehrlingTab">  
-      <div class="ueberschrift">Lehrling</div>
+      <div class="ueberschrift">{{aktuellername}}</div>
     <mat-tab-group mat-align-tabs="start">
       <mat-tab label="Kompetenz">
         <br><br>Hier werden die erworbenen und noch fehlenden Kompetenzen des ausgewählten Lehrlings angezeigt

src/app/dash/dash.component.ts

@@ -13,6 +13,7 @@ import { MatPaginator} from '@angular/material/paginator';
 import { MatSortModule, Sort } from '@angular/material/sort';
 import { MatSort } from '@angular/material/sort';
 import {MatTabsModule} from '@angular/material/tabs';
+import { SelectionModel } from '@angular/cdk/collections';
 @Component({
   selector: 'app-dash',
   templateUrl: './dash.component.html',
@@ -26,6 +27,9 @@ export class DashComponent implements OnInit, AfterViewInit {
   public widget: any;
   selectedLehrling: Lehrling | null = null;
   public datasource: MatTableDataSource<Lehrling>;
+  public angewaehlt: any;
+  public aktuellername: any;
+  selection = new SelectionModel<Pruefung>(true, []);
   
   displayedColumns: string[] = ['apprenticeid', 
                                 'firstname',
@@ -78,5 +82,17 @@ private _liveAnnouncer: any;
     }
   }
 
+  onclick(row: any) {
+    this.angewaehlt = row;
+    this.aktuellername = row.firstname + ' ' + row.lastname;
+   //  console.log(this.aktuellername);
+  }
 
+  selectHandler(row: Pruefung) {
+    
+      if (!this.selection.isSelected(row)) {
+        this.selection.clear();
+      }
+
+  }
 }

src/app/gruppen/gruppen.component.html

@@ -0,0 +1,37 @@
+<div class="pb-1 mb-4 display-6 border-bottom border-danger">
+    Gruppe
+</div>
+<div class="container col-5 float-left">
+    <mat-form-field appearance="standard">
+        <mat-label>Filter</mat-label>
+        <input matInput (keyup)="applyFilter($event)" placeholder="Suchbegriff" #input>
+    </mat-form-field>
+
+    <table mat-table [dataSource]="dataSource" matSort (matSortChange)="announceSortChange($event)" class="mat-elevation-z8">
+        <ng-container matColumnDef="groupid">
+            <th  class="kopf col-1" mat-header-cell *matHeaderCellDef> ID </th>
+            <td mat-cell *matCellDef="let grp"> {{grp.groupid}} </td>
+        </ng-container>
+        <ng-container matColumnDef="groupname">
+            <th  class="kopf col-3" mat-sort-header mat-header-cell *matHeaderCellDef> Name </th>
+            <td mat-cell *matCellDef="let grp"> {{grp.groupname}} </td>
+        </ng-container>
+        <ng-container matColumnDef="date_started">
+            <th  class="kopf col-2" mat-sort-header mat-header-cell *matHeaderCellDef> Gestartet </th>
+            <td mat-cell *matCellDef="let grp"> {{grp.date_started}} </td>
+        </ng-container>
+        <ng-container matColumnDef="date_end">
+            <th  class="kopf col-2" mat-header-cell *matHeaderCellDef> Beendet </th>
+            <td mat-cell *matCellDef="let grp"> {{grp.date_end}} </td>
+        </ng-container>
+        <ng-container matColumnDef="Anmerkung">
+            <th  class="kopf col-2" mat-header-cell *matHeaderCellDef> Anmerkung </th>
+            <td mat-cell *matCellDef="let grp"> {{grp.Anmerkung}} </td>
+        </ng-container>
+        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+        <tr mat-row 
+            *matRowDef="let  grprow; columns: displayedColumns;" 
+            (click)="onclick(grprow)"></tr>
+    </table>
+    <mat-paginator class="mat-elevation-z8 mt-2" #paginator [pageSizeOptions]="[10, 20, 50]" showFirstLastButtons></mat-paginator>
+</div>

src/app/gruppen/gruppen.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { GruppenComponent } from './gruppen.component';
+
+describe('GruppenComponent', () => {
+  let component: GruppenComponent;
+  let fixture: ComponentFixture<GruppenComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ GruppenComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(GruppenComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/gruppen/gruppen.component.ts

@@ -0,0 +1,79 @@
+import { LiveAnnouncer } from '@angular/cdk/a11y';
+import { HttpClient } from '@angular/common/http';
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { FormBuilder } from '@angular/forms';
+import { MatPaginator } from '@angular/material/paginator';
+import { MatSort, Sort } from '@angular/material/sort';
+import { MatTableDataSource } from '@angular/material/table';
+import { ActivatedRoute, Router } from '@angular/router';
+import { Gruppe } from '../Gruppe';
+import { GruppeService } from '../services/gruppe.service';
+
+@Component({
+  selector: 'app-gruppen',
+  templateUrl: './gruppen.component.html',
+  styleUrls: ['./gruppen.component.css']
+})
+export class GruppenComponent implements OnInit {
+
+  public gruppen: any;
+  public selection: any;
+  public dataSource: any;
+  displayedColumns: any = ["groupid", "groupname", "date_started", "date_end", "Anmerkung"];
+
+  constructor(private _liveAnnouncer: LiveAnnouncer,
+    private formbuilder: FormBuilder,
+    private router: Router,
+    private activatedRoute: ActivatedRoute,
+    private http: HttpClient,
+    private grpService: GruppeService
+    ) { }
+
+    @ViewChild('paginator') paginator: MatPaginator;
+    @ViewChild(MatSort) sort: MatSort;
+    
+  ngOnInit(): void {
+    this.grpService.getGruppen().subscribe (
+      (
+        result: any) => {
+        console.log(result);
+        this.gruppen = result.data;
+        this.dataSource = new MatTableDataSource(this.gruppen)
+        this.dataSource.paginator = this.paginator;
+        this.dataSource.sort = this.sort;
+      })
+  }
+
+  applyFilter(event: Event) {
+    const filterValue = (event.target as HTMLInputElement).value;
+    this.dataSource.filter = filterValue.trim().toLowerCase();
+    console.log("Filter: " + this.dataSource.filter);
+  }
+
+  /** Announce the change in sort state for assistive technology. */
+  announceSortChange(sortState: Sort) {
+    // This example uses English messages. If your application supports
+    // multiple language, you would internationalize these strings.
+    // Furthermore, you can customize the message to add additional
+    // details about the values being sorted.
+    if (sortState.direction) {
+      this._liveAnnouncer.announce(`Sorted ${sortState.direction}ending`);
+    } else {
+      this._liveAnnouncer.announce('Sorting cleared');
+    }
+  }
+
+  ngAfterViewInit() {
+    if(this.dataSource != undefined) {
+      this.dataSource.paginator = this.paginator;
+      this.dataSource.sort = this.sort;
+      console.log(this.dataSource);
+    }
+    else
+      console.log("DataSource undefined in AfterViewInit");
+  }
+
+  onclick(aktuell: Gruppe) {
+
+  }
+}

src/app/kompetenz/kompetenz.component.html

@@ -29,10 +29,12 @@
     <mat-paginator class="mat-elevation-z8 mt-2" #paginator [pageSizeOptions]="[10, 20, 50]" showFirstLastButtons></mat-paginator>
 </div>
 <!-- Edit Bereich -->
-<div class="container col-6 float-right">
+<div class="container col-6 float-left">
     <div class="abstandoben">&nbsp;</div>
-    <div class="ueberschrift mt-3">Kompetenz bearbeiten</div>
+    <div class="ueberschrift mt-3">Kompetenz bearbeiten
-    <div class="container mt-8 mat-elevation-z8 bg-white">
+        <button class="btn btn-primary float-right mt-5">Neu</button>
+    </div>
+    <div class="container mt-8 mat-elevation-z8 mt-2 bg-white">
         
         <form class="form" [formGroup]="editForm" novalidate>
             <div class="row">

src/app/kompetenz/kompetenz.component.ts

@@ -79,10 +79,6 @@ export class KompetenzComponent implements OnInit {
 
   /** Announce the change in sort state for assistive technology. */
   announceSortChange(sortState: Sort) {
-    // This example uses English messages. If your application supports
-    // multiple language, you would internationalize these strings.
-    // Furthermore, you can customize the message to add additional
-    // details about the values being sorted.
     if (sortState.direction) {
       this._liveAnnouncer.announce(`Sorted ${sortState.direction}ending`);
     } else {

src/app/list-lehrlinge/list-lehrlinge.component.html

@@ -1,6 +1,6 @@
 
     <div class="pb-1 mb-4 display-6 border-bottom border-danger">
-        Lehrlinge
+        Teilnehmer
     </div>
 <div class="container col-5 float-left">
   <mat-form-field appearance="standard">
@@ -8,37 +8,22 @@
     <input matInput (keyup)="applyFilter($event)" placeholder="Suchbegriff" #input>
   </mat-form-field>
 
-  <table mat-table [dataSource]="dsLehrlinge" class=" table mat-elevation-z8">
+  <table mat-table [dataSource]="dsLehrlinge" mat-sort class=" table mat-elevation-z8">
-    <!-- Checkbox Column -->
+   
-   <!-- <ng-container class="checkfeld" matColumnDef="select">
-        <th mat-header-cell *matHeaderCellDef>
-          <mat-checkbox (change)="$event ? masterToggle() : null"
-                        [checked]="selection.hasValue() && isAllSelected()"
-                        [indeterminate]="selection.hasValue() && !isAllSelected()">
-          </mat-checkbox>
-        </th>
-        <td mat-cell *matCellDef="let row">
-            <mat-checkbox (click)="$event.stopPropagation()"                    
-                        (change)="$event ? selection.toggle(row) : null"
-                        [checked]="selection.isSelected(row)">
-            </mat-checkbox>
-        </td>
-      </ng-container>
-      -->
     <ng-container matColumnDef="apprenticeid">
         <th mat-header-cell *matHeaderCellDef> ID </th>
         <td mat-cell *matCellDef="let user"> {{user.apprenticeid}} </td>
       </ng-container>
     <ng-container matColumnDef="firstname">
-        <th mat-header-cell *matHeaderCellDef> Vorname </th>
+        <th mat-header-cell mat-sort-header *matHeaderCellDef> Vorname </th>
         <td mat-cell *matCellDef="let user"> {{user.firstname}} </td>
       </ng-container>
       <ng-container matColumnDef="lastname">
-        <th mat-header-cell *matHeaderCellDef> Name </th>
+        <th mat-header-cell mat-sort-header *matHeaderCellDef> Name </th>
         <td mat-cell *matCellDef="let user"> {{user.lastname}} </td>
       </ng-container>
       <ng-container matColumnDef="groupname">
-        <th mat-header-cell *matHeaderCellDef> Gruppe </th>
+        <th mat-header-cell mat-sort-header *matHeaderCellDef> Gruppe </th>
         <td mat-cell *matCellDef="let user"> {{user.groupname}} </td>
       </ng-container>
 
@@ -54,10 +39,12 @@
   </mat-paginator>
 </div>
 <!-- Edit Bereich -->
-<div class="container col-6 float-left">
+<div class="container col-6 mt-3 float-left">
-  <div class="titel">Lehrling bearbeiten</div>
+  <div class="abstandoben">&nbsp;</div>
+  <div class="ueberschrift">Teilnehmer bearbeiten
+    <button class="btn btn-primary float-right mt-5">Neu</button>
+  </div>
   <div class="container mt-8 mat-elevation-z8 bg-white">
-      
       <form class="form" [formGroup]="editForm" novalidate>
           <div class="row">
               <mat-form-field class="col-md-3" appearance="fill">

src/app/modul/modul.component.html

@@ -30,9 +30,11 @@
     <mat-paginator class="mat-elevation-z8 mt-2" #paginator [pageSizeOptions]="[10, 20, 50]" showFirstLastButtons></mat-paginator>
 </div>
 <!-- Edit Bereich -->
-<div class="container col-6 float-right">
+<div class="container col-6 mt-3 float-left">
-    
+    <div class="abstandoben">&nbsp;</div>
-    <div class="titel">Modul bearbeiten</div>
+    <div class="ueberschrift">Modul bearbeiten
+        <button class="btn btn-primary float-right mt-5">Neu</button>
+    </div>
     <div class="container mt-8 mat-elevation-z8">
         
         <form>

src/app/prergebnis/prergebnis.component.html

@@ -25,6 +25,9 @@
             <mat-label>Filter</mat-label>
             <input matInput (keyup)="applypersonFilter($event)" placeholder="Suchbegriff" #input>
         </mat-form-field>
+        <mat-form-field class="ml-5">
+          <input matInput [formControl]="serializedDate">
+        </mat-form-field>
       </div>
     </div>
     <div class="row col-12">

src/app/prergebnis/prergebnis.component.ts

@@ -9,7 +9,10 @@ import { PruefungService } from '../services/pruefung.service';
 import {MatSelectModule} from '@angular/material/select';
 import { PruefungsergebnisService } from '../services/pruefungsergebnis.service';
 import { Pruefungsergebnis } from '../Pruefungsergebnis';
-import {MatRadioModule} from '@angular/material/radio';
+import { MatRadioModule} from '@angular/material/radio';
+import { MatNativeDateModule } from '@angular/material/core';
+import { FormControl } from '@angular/forms';
+
 
 export enum SelectType {
   single,
@@ -37,6 +40,9 @@ export class PrergebnisComponent implements OnInit {
    public angewaehlt: any;
    public ergangewaehlt: any;
    public abgewählt: any;
+   public pruefungsdatum: any;
+   date = new FormControl(new Date());
+   serializedDate = new FormControl(new Date().toISOString());
 
    displayedColumns: any = [  "examid", "examshort", "examname", "examdescription"];
    ergdisplayedColumns: any = [  "firstname", "lastname", "date_of_exam", "acquired"];

src/app/pruefung/pruefung.component.html

@@ -1,6 +1,7 @@
 <div class="pb-1 mb-4 display-6 border-bottom border-danger">
     Prüfungen
 </div>
+<div class="container col-5 float-left">
     <mat-form-field appearance="standard">
         <mat-label>Filter</mat-label>
         <input matInput (keyup)="applyFilter($event)" placeholder="Suchbegriff" #input>
@@ -27,3 +28,17 @@
         <tr mat-row *matRowDef="let  pruerow; columns: displayedColumns;"></tr>
     </table>
     <mat-paginator class="mat-elevation-z8 mt-2" #paginator [pageSizeOptions]="[10, 20, 50]" showFirstLastButtons></mat-paginator>
+</div>
+<!-- Edit Bereich -->
+<div class="container col-6 mt-3 float-left">
+    <div class="abstandoben">&nbsp;</div>
+    <div class="ueberschrift">Prüfung bearbeiten
+        <button class="btn btn-primary float-right mt-5">Neu</button>
+    </div>
+    <div class="container mt-8 mat-elevation-z8">
+        
+        <form>
+        
+        </form>
+    </div>
+</div>

src/app/pruefung/pruefung.component.ts

@@ -21,6 +21,7 @@ export class PruefungComponent implements OnInit {
 
    public dataSource: any;
    public pruefungen: any;  
+   
    public selection: any;
    displayedColumns: any = ["examid", "examshort", "examname", "examdescription"];
    

src/app/services/gruppe.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { GruppeService } from './gruppe.service';
+
+describe('GruppeService', () => {
+  let service: GruppeService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(GruppeService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/services/gruppe.service.ts

@@ -0,0 +1,23 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Gruppe } from '../Gruppe';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class GruppeService {
+
+  public $url = "http://localhost/bildungdb/api/group_data.php";
+  strAnfrage ="";
+
+  constructor(private http: HttpClient) { }
+
+  getGruppen() {
+    return this.http.get<Gruppe[]>(this.$url);
+  }
+
+  getSingleKompetenz(aktid: any) {
+    this.strAnfrage= this.$url + "?id="+ aktid;
+    return this.http.get<Gruppe>(this.strAnfrage);
+  }
+}

src/app/sidebar/sidebar.component.html

@@ -6,46 +6,42 @@
         </div>
       </a>
     </div>
-      <ul class="nav">
+      <ul class="nav flex-column">
-        <li routerLinkActive="active">
+        <li class="nav-item" routerLinkActive="active">
-            <a class="mt-0" routerLink="dash">
+            <a class="nav-link" routerLink="dash">
-                <p>Dashboard</p>
+                Dashboard
             </a>
         </li>
-        <li  routerLinkActive="active">
+        <li class="nav-item" routerLinkActive="active">
-            <a class="mt-0" routerLink="dashboard">
+            <a class="nav-link" routerLink="pruefungergebnis">
-                <p>Übersicht</p>
+                Prüfungsergebnis
             </a>
         </li>
-        <li routerLinkActive="active">
+        <li  class="nav-item" routerLinkActive="active" >
-            <a class="mt-0" routerLink="list-lehrling">
+            <a class="nav-link" routerLink="list-lehrling">
-                <p>Lehrling</p>
+                <p>Teilnehmer</p>
-            </a>
-        </li>
-
-        <li routerLinkActive="active">
-            <a class="mt-0" routerLink="kompetenz">
-                <p>Kompetenz</p>
-            </a>
-        </li>
-
-        <li routerLinkActive="active">
-            <a class="mt-0" routerLink="modul">
-                <p>Modul</p>
-            </a>
-        </li>
-        
-        <li routerLinkActive="active">
-            <a class="mt-0" routerLink="pruefung">
-                <p>Prüfung</p>
-            </a>
-        </li>
-        
-        <li routerLinkActive="active">
-            <a class="mt-0" routerLink="pruefungergebnis">
-                <p>Prüfungsergebnis</p>
             </a>
         </li>
+            <li class="nav-item" routerLinkActive="active">
+                <a class="nav-link" routerLink="gruppen">
+                    <p>Gruppe</p>
+                </a>
+            </li>
+            <li class="nav-item" routerLinkActive="active">
+                <a class="nav-link" routerLink="kompetenz">
+                    <p>Kompetenz</p>
+                </a>
+            </li>
+            <li class="nav-item" routerLinkActive="active">
+                <a class="nav-link" routerLink="modul">
+                    <p>Modul</p>
+                </a>
+            </li>
+            <li class="nav-item" routerLinkActive="active">
+                <a class="nav-link" routerLink="pruefung">
+                    <p>Prüfung</p>
+                </a>
+            </li>       
 
         <li routerLinkActive="active">
             <a class="mt-0" routerLink="l2b">

src/app/sidebar/sidebar.component.ts

@@ -1,8 +1,25 @@
-import { Component, OnInit } from '@angular/core';
+import { MediaMatcher } from '@angular/cdk/layout';
+import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
+
 
 @Component({
     selector: 'app-sidebar-cmp',
     templateUrl: 'sidebar.component.html',
 })
 export class SidebarComponent {
+
+    mobileQuery: MediaQueryList;
+
+  fillerNav = Array.from({length: 50}, (_, i) => `Nav Item ${i + 1}`);
+  private _mobileQueryListener: () => void;
+
+    constructor(changeDetectorRef: ChangeDetectorRef, media: MediaMatcher) {
+    this.mobileQuery = media.matchMedia('(max-width: 600px)');
+    this._mobileQueryListener = () => changeDetectorRef.detectChanges();
+    this.mobileQuery.addListener(this._mobileQueryListener);
+  }
+
+  ngOnDestroy(): void {
+    this.mobileQuery.removeListener(this._mobileQueryListener);
+  }
 }