tvolkmann/travopti
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Add share button to side-nav

Browse Source
This commit is contained in:
Patrick Gebhardt 2020-06-25 13:08:24 +02:00
parent 218b508f43
commit 2060eea09f
2 changed files with 27 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
frontend/src/app/app.component.html
View File

@ -4,21 +4,24 @@
</button>
<img alt="Travopti logo" class="title" src="assets/logo.svg">
</mat-toolbar>
<mat-drawer-container autosize class="drawer">
<mat-drawer-container autosize>
<mat-drawer #drawer [mode]="isMobile?'over':'side'" [opened]="!isMobile">
<div class="side-nav">
<a (click)="isMobile&&drawer.close()" mat-button routerLink="home" routerLinkActive="active">
<mat-icon>home</mat-icon>
<span>Home</span>
</a>
<a (click)="isMobile&&drawer.close()" mat-button routerLink="bookmark" routerLinkActive="active">
<mat-icon>bookmark</mat-icon>
<span>Your bookmarks</span>
</a>
<a (click)="isMobile&&drawer.close()" mat-button routerLink="team" routerLinkActive="active">
<mat-icon>group</mat-icon>
<span>About us</span>
</a>
<div class="drawer">
<div class="side-nav">
<a (click)="isMobile&&drawer.close()" mat-button routerLink="home" routerLinkActive="active">
<mat-icon>home</mat-icon>
<span>Home</span>
</a>
<a (click)="isMobile&&drawer.close()" mat-button routerLink="bookmark" routerLinkActive="active">
<mat-icon>bookmark</mat-icon>
<span>Your bookmarks</span>
</a>
<a (click)="isMobile&&drawer.close()" mat-button routerLink="team" routerLinkActive="active">
<mat-icon>group</mat-icon>
<span>About us</span>
</a>
</div>
<a class="feedback" href="mailto:feedback@travopti.de">Feedback</a>
</div>
</mat-drawer>
<mat-drawer-content class="content">

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

@ -24,11 +24,14 @@
.drawer {
flex: 1 1 auto;
display: flex;
flex-direction: column;
height: 100%;
.side-nav {
flex: 1 1 auto;
display: flex;
flex-direction: column;
height: 100%;
min-width: 12.5vw;
box-sizing: border-box;
padding: 1rem 0;
@ -50,6 +53,12 @@
}
}
}
.feedback {
margin: 1rem;
text-align: center;
color: gray;
}
}
.content {