notifications - dropdown

matsen-tool/package-lock.json

@@ -19,6 +19,8 @@
         "@angular/platform-browser-dynamic": "^17.0.0",
         "@angular/router": "^17.0.0",
         "@ng-bootstrap/ng-bootstrap": "^16.0.0-rc.2",
+        "@ngx-translate/core": "^15.0.0",
+        "@ngx-translate/http-loader": "^8.0.0",
         "@popperjs/core": "^2.11.8",
         "bootstrap": "^5.3.2",
         "bootstrap-icons": "^1.11.2",
@@ -3746,6 +3748,33 @@
         "webpack": "^5.54.0"
       }
     },
+    "node_modules/@ngx-translate/core": {
+      "version": "15.0.0",
+      "resolved": "https://registry.npmjs.org/@ngx-translate/core/-/core-15.0.0.tgz",
+      "integrity": "sha512-Am5uiuR0bOOxyoercDnAA3rJVizo4RRqJHo8N3RqJ+XfzVP/I845yEnMADykOHvM6HkVm4SZSnJBOiz0Anx5BA==",
+      "engines": {
+        "node": "^16.13.0 || >=18.10.0"
+      },
+      "peerDependencies": {
+        "@angular/common": ">=16.0.0",
+        "@angular/core": ">=16.0.0",
+        "rxjs": "^6.5.5 || ^7.4.0"
+      }
+    },
+    "node_modules/@ngx-translate/http-loader": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@ngx-translate/http-loader/-/http-loader-8.0.0.tgz",
+      "integrity": "sha512-SFMsdUcmHF5OdZkL1CHEoSAwbP5EbAOPTLLboOCRRoOg21P4GJx+51jxGdJeGve6LSKLf4Pay7BkTwmE6vxYlg==",
+      "engines": {
+        "node": "^16.13.0 || >=18.10.0"
+      },
+      "peerDependencies": {
+        "@angular/common": ">=16.0.0",
+        "@angular/core": ">=16.0.0",
+        "@ngx-translate/core": ">=15.0.0",
+        "rxjs": "^6.5.5 || ^7.4.0"
+      }
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",

matsen-tool/src/app/app.component.html

@@ -1,12 +1,23 @@
 <!-- nav -->
-<nav class="navbar navbar-expand navbar-dark bg-dark px-3" *ngIf="user">
+<nav class="navbar navbar-expand navbar-primary bg-primary px-3" *ngIf="user">
     <div class="container-fluid">
         <div class="navbar-nav">
             <a class="nav-item nav-link" routerLink="/" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">
                 <img src="./assets/images/specific/matsen_logo.svg" width="247" height="94" alt="{{'basic.company-name' | translate}}" />
             </a>
         </div>
-        <div class="navbar-nav">
+        <div class="navbar-nav align-items-center">
+            <div class="pe-2 me-4 position-relative" data-bs-toggle="dropdown">Benachrichtigungen
+                <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
+                    99+
+                </span>
+                <ul class="dropdown-menu dropdown-menu-end">
+                    <li><a class="dropdown-item" href="#">Fesago: Jan antwortete auf Deinen Beitrag</a></li>
+                    <li><a class="dropdown-item" href="#">Matsen: Peter antwortete auf Deinen Beitrag</a></li>
+                    <li><a class="dropdown-item" href="#">spawntree: Du hast eine neue Aufgabe erhalten</a></li>
+                    <li><a class="dropdown-item" href="#">Peter Matusik: Christian hat einen Kommentar verfasst</a></li>
+                </ul>
+            </div>
             <button class="btn btn-link nav-item nav-link" (click)="logout()">{{'basic.logout' | translate}}</button>
         </div>
     </div>

matsen-tool/src/app/home/home.component.html

@@ -100,7 +100,6 @@
 
 </div>
 <ul>
-    <li>Posts</li>
     <li *ngFor="let post of posts">
         <h2>{{post.id}} - {{post.owner}}</h2>
         <p>{{post.message}}</p>