Add "my-publications" page.

frontend/src/app/components/header/header.component.html

@@ -13,11 +13,24 @@
 </div>
 
 <div class="right">
-    <ng-container *ngIf="isAuthenticated; else anonymousRightMenu">
-        <a [routerLink]="['/disconnect']" class="button" matRipple>Disconnect</a>
-    </ng-container>
-    <ng-template #anonymousRightMenu>
+    @if (isAuthenticated) {
+        <button mat-button class="button" [matMenuTriggerFor]="authenticatedUserMenu">
+            <mat-icon>more_vert</mat-icon>
+        </button>
+        <mat-menu #authenticatedUserMenu="matMenu">
+            <div class="authenticated-user-menu">
+                <a [routerLink]="['/my-publications']" matRipple>
+                    <mat-icon>description</mat-icon>
+                    My publications
+                </a>
+                <a [routerLink]="['/disconnect']" matRipple class="disconnection">
+                    <mat-icon>logout</mat-icon>
+                    Disconnect
+                </a>
+            </div>
+        </mat-menu>
+    } @else {
         <a [routerLink]="['/login']" class="button" matRipple>Login</a>
-    </ng-template>
+    }
 </div>
 <app-side-menu #sideMenu></app-side-menu>

frontend/src/app/components/header/header.component.scss

@@ -139,10 +139,65 @@ $headerHeight: 3.5em;
                     background-color: #5c6bc0;
                 }
             }
+
+             button {
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                min-width: 2.5em;
+                color: white;
+                margin: 0.5em 0.5em;
+                border-radius: 10em;
+                text-decoration: none;
+                padding: 0;
+                background-color: #3f51b5;
+                transition: background-color .2s ease-in-out;
+
+                &:hover {
+                    background-color: #5c6bc0;
+                }
+
+                mat-icon {
+                    margin: 0;
+                }
+            }
         }
     }
 }
 
 app-side-menu {
     height: 100%;
+}
+
+.authenticated-user-menu {
+    display: flex;
+    flex-direction: column;
+    padding: 0.2em 0;
+
+    a {
+        flex: 1;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        text-decoration: none;
+        background-color: white;
+        color: black;
+        padding: 1em;
+        gap: .5em;
+        transition: background-color .2s ease-in-out, color .2s ease-in-out;
+
+        &:hover {
+            background-color: #5c6bc0;
+            color: white;
+        }
+
+        &.disconnection {
+            color: red;
+
+            &:hover {
+                background-color: red;
+                color: white;
+            }
+        }
+    }
 }

frontend/src/app/components/header/header.component.ts

@@ -9,6 +9,8 @@ import { MatRippleModule } from '@angular/material/core';
 import { FormControl, ReactiveFormsModule } from '@angular/forms';
 import { PublicationsSearchBarComponent } from '../publications-search-bar/publications-search-bar.component';
 import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatMenuModule } from '@angular/material/menu'; 
+import { User } from '../../core/model/User';
 
 @Component({
   selector: 'app-header',
@@ -17,12 +19,13 @@ import { MatTooltipModule } from '@angular/material/tooltip';
     CommonModule,
     MatButtonModule,
     MatIconModule,
+    MatMenuModule,
+    MatRippleModule,
+    MatTooltipModule,
+    PublicationsSearchBarComponent,
+    ReactiveFormsModule,
     RouterModule,
     SideMenuComponent,
-    MatRippleModule,
-    ReactiveFormsModule,
-    PublicationsSearchBarComponent,
-    MatTooltipModule
   ],
   templateUrl: './header.component.html',
   styleUrl: './header.component.scss',
@@ -34,8 +37,4 @@ export class HeaderComponent {
   get isAuthenticated(): boolean {
     return this.authenticationService.isAuthenticated();
   }
-  
-  searchPublications(): void {
-
-  }
 }