ticketfrei/ticketfrei3
8
1
Fork 0
Code Issues 11 Pull requests 2 Projects 1 Releases Wiki Activity

[frontend] Add mobile navbar

Browse source
This commit is contained in:
Cathy Hu 2020-09-01 21:11:23 +02:00
parent d35fc500d0
commit c19aa91ec8
2 changed files with 59 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

50
kibicara-frontend/src/app/shared/toolbar/toolbar.component.html
View file

@ -2,21 +2,63 @@
<a mat-button [routerLink]="['/']" routerLinkActive="router-link-active"
>Kibicara</a
>
<a mat-button [routerLink]="['/hoods']" routerLinkActive="router-link-active"
<a
mat-button
[routerLink]="['/hoods']"
routerLinkActive="router-link-active"
class="hide-button"
>All hoods</a
>
<a
mat-icon-button
[routerLink]="['/hoods']"
routerLinkActive="router-link-active"
class="show-button"
><mat-icon>search</mat-icon></a
>
<a
mat-button
[routerLink]="['/organizers']"
routerLinkActive="router-link-active"
class="hide-button"
>Become a hood admin!</a
>
<a
mat-icon-button
[routerLink]="['/organizers']"
routerLinkActive="router-link-active"
class="show-button"
><mat-icon>add_box</mat-icon></a
>
<span class="example-spacer"></span>
<div *ngIf="authenticated; else unauthenticated">
<a mat-raised-button [routerLink]="['/dashboard']" routerLinkActive="router-link-active">Dashboard</a>
<a mat-button (click)="onLogout()" routerLinkActive="router-link-active">Logout</a>
<a
mat-raised-button
[routerLink]="['/dashboard']"
routerLinkActive="router-link-active"
>Dashboard</a
>
<a
mat-button
(click)="onLogout()"
routerLinkActive="router-link-active"
class="hide-button"
>Logout</a
>
<a
mat-button
(click)="onLogout()"
routerLinkActive="router-link-active"
class="show-button"
><mat-icon>exit_to_app</mat-icon></a
>
</div>
<ng-template #unauthenticated>
<a mat-button [routerLink]="['/login']" routerLinkActive="router-link-active">Login</a>
<a
mat-button
[routerLink]="['/login']"
routerLinkActive="router-link-active"
>Login</a
>
</ng-template>
</mat-toolbar>

13
kibicara-frontend/src/app/shared/toolbar/toolbar.component.scss
View file

@ -1,3 +1,16 @@
.example-spacer {
flex: 1 auto;
}
.hide-button {
@media screen and (max-width: 600px) {
display: none;
}
}
.show-button {
display: none;
@media screen and (max-width: 600px) {
display: initial;
}
}