Added Buttons for Profile/Sharing // Responsive Design for Language Selection

src/app/app.component.css

@@ -31,4 +31,63 @@ footer p {
 
 .spacer {
   flex: 1 1 auto;
-}
\ No newline at end of file
+}
+
+a.button {
+  -webkit-appearance: button;
+  -moz-appearance: button;
+  appearance: button;
+
+  text-decoration: none;
+  color: white;
+}
+
+.thin {
+  min-width: 50px!important;
+}
+
+
+/* Dropdown Button */
+.dropbtn {
+  background-color: #3498DB;
+  color: white;
+  padding: 16px;
+  font-size: 16px;
+  border: none;
+  cursor: pointer;
+}
+
+/* Dropdown button on hover & focus */
+.dropbtn:hover, .dropbtn:focus {
+  background-color: #2980B9;
+}
+
+/* The container <div> - needed to position the dropdown content */
+.dropdown {
+  position: relative;
+  display: inline-block;
+}
+
+/* Dropdown Content (Hidden by Default) */
+.dropdown-content {
+  display: none;
+  position: absolute;
+  background-color: #f1f1f1;
+  min-width: 160px;
+  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+  z-index: 1;
+}
+
+/* Links inside the dropdown */
+.dropdown-content a {
+  color: black;
+  padding: 12px 16px;
+  text-decoration: none;
+  display: block;
+}
+
+/* Change color of dropdown links on hover */
+.dropdown-content a:hover {background-color: #ddd}
+
+/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
+.show {display:block;}
\ No newline at end of file

src/app/app.component.html

@@ -2,17 +2,19 @@
   <mat-toolbar color="primary">
     <mat-toolbar-row>
       <span><a href=""><img src="/assets/THD-Logo.png" height="50"></a></span>
-      <span class="spacer"></span>
-      <app-select-language></app-select-language>    
     </mat-toolbar-row>
   </mat-toolbar>
-
+  
   <nav mat-tab-nav-bar backgroundColor="primary">
     <a mat-tab-link routerLink="/navigation">{{'cNavigation'|translate}}</a>
     <a mat-tab-link routerLink="/events">Events</a>
     <a mat-tab-link routerLink="/international">News</a>
     <a mat-tab-link routerLink="/thabella">Thabella</a>
     <a mat-tab-link routerLink="/login">Login</a>
+    <span class="spacer"></span>
+    <a mat-tab-link class="thin"><app-select-language></app-select-language></a>
+    <a mat-tab-link class="thin" routerLink="/login"><mat-icon>perm_identity</mat-icon></a>
+    <a mat-tab-link class="thin"><mat-icon>share</mat-icon></a>
   </nav>
 </div>
 

src/app/app.module.ts

@@ -30,6 +30,8 @@ import { SelectLanguageComponent } from './select-language/select-language.compo
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatSelectModule } from '@angular/material/select';
+import { MatButtonToggleModule } from '@angular/material/button-toggle';
+import { MatIconModule } from '@angular/material/icon';
 
 @NgModule({
   declarations: [
@@ -63,7 +65,9 @@ import { MatSelectModule } from '@angular/material/select';
     MatFormFieldModule,
     MatSelectModule,
     FormsModule,
-    ReactiveFormsModule],
+    ReactiveFormsModule,
+    MatButtonToggleModule,
+    MatIconModule],
   providers: [],
   bootstrap: [AppComponent]
 })

src/app/select-language/select-language.component.css

 .mat-form-field {
     margin-top: 10px;
-}
\ No newline at end of file
+}
+
+.not-empty-select.mat-selected {
+    color: white !important;
+}
+  
+:host /deep/ .mat-select-value-text {
+    color: white !important;
+}

src/app/select-language/select-language.component.html

-<mat-form-field #langFormField appearance="fill">
-    <mat-label>{{langView}}</mat-label>
+<a>{{langView}}:&nbsp;
+    <button mat-icon-button matTooltip="Language">
         <mat-select #langSelect [(value)]="currLangViewValue" (selectionChange)="changeLanguage($event.value)">
-        <mat-option *ngFor="let lang of languages" [value]="lang.value"
-            [attr.selected]='de'
-        >
-        {{lang.viewValue}}
-        </mat-option>
-    </mat-select>
-</mat-form-field>
\ No newline at end of file
+            <mat-option *ngFor="let lang of languages" [value]="lang.value" [attr.selected]='de'>
+            {{lang.viewValue}}
+            </mat-option>
+        </mat-select>
+    </button>
+</a>