florian/codiki-hexagonal
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Design some buttons in header.

Browse Source
This commit is contained in:
Florian THIERRY
2024-06-28 09:35:56 +02:00
parent 4cc2a15231
commit 42c4f76c0d
3 changed files with 14 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/app/components/header/header.component.html
View File

@@ -17,10 +17,10 @@
</div> </div>
<div> <div>
<ng-container *ngIf="isAuthenticated; else anonymousRightMenu"> <ng-container *ngIf="isAuthenticated; else anonymousRightMenu">
<a [routerLink]="['/disconnect']">Disconnect</a> <a [routerLink]="['/disconnect']" matRipple>Disconnect</a>
</ng-container> </ng-container>
<ng-template #anonymousRightMenu> <ng-template #anonymousRightMenu>
<a [routerLink]="['/login']">Login</a> <a [routerLink]="['/login']" matRipple>Login</a>
</ng-template> </ng-template>
</div> </div>
<app-side-menu #sideMenu></app-side-menu> <app-side-menu #sideMenu></app-side-menu>

11
frontend/src/app/components/header/header.component.scss
View File

@@ -149,7 +149,16 @@ $headerHeight: 3.5em;
align-items: center; align-items: center;
min-width: 5em; min-width: 5em;
color: white; color: white;
margin: 0 .5em; margin: 0.5em 0.5em;
border-radius: 10em;
text-decoration: none;
padding: 0 .8em;
background-color: #3f51b5;
transition: background-color .2s ease-in-out;
&:hover {
background-color: #5c6bc0;
}
} }
} }
} }

3
frontend/src/app/components/header/header.component.ts
View File

@@ -5,11 +5,12 @@ import { RouterModule } from '@angular/router';
import { AuthenticationService } from '../../core/service/authentication.service'; import { AuthenticationService } from '../../core/service/authentication.service';
import { CommonModule } from '@angular/common'; import { CommonModule } from '@angular/common';
import { SideMenuComponent } from '../side-menu/side-menu.component'; import { SideMenuComponent } from '../side-menu/side-menu.component';
import { MatRippleModule } from '@angular/material/core';
@Component({ @Component({
selector: 'app-header', selector: 'app-header',
standalone: true, standalone: true,
imports: [CommonModule, MatButtonModule, MatIconModule, RouterModule, SideMenuComponent], imports: [CommonModule, MatButtonModule, MatIconModule, RouterModule, SideMenuComponent, MatRippleModule],
templateUrl: './header.component.html', templateUrl: './header.component.html',
styleUrl: './header.component.scss', styleUrl: './header.component.scss',
}) })