Navigatie.

In de navigatie staat voorlopig zowel de login- als de logout-link zichtbaar. Dit ga je nu aanpassen zodat maar één van de twee links zichtbaar blijft.
Zodra de gebruiker is ingelogd, verschijnt zijn naam en zijn foto net voor de logout-link.

Component aanpassen.

In de component hoef je enkel nog de authService in de constructor te injecteren. Let op: ook hier weer public injecteren zodat de template toegang krijgt tot de service.

• Wijzig de code op src/app/navbar/navbar.component.ts.

Template aanpassen.

• Wijzig de code op src/app/navbar/navbar.component.html.

• Logout
  De li-tag is enkel zichtbaar indien de lokale variabele user niet null is.
  Het click-event verwijst rechtstreeks naar de methode logout() van de authService.
• Login
  De li-tag is enkel zichtbaar indien de lokale variabele user wel null is.
• photoURL en displayName
  Plaats net voor login-link een span-tag met daarin een img-tag die verwijst naar user.photoURL en toon de user.displayName. De span-tag is enkel zichtbaar als user niet null is.

CSS aanpassen.

De foto is nog veel te groot om deftig binnen de navigatie te passen. Hoog tijd dus om de CSS wat bij te sturen.

• Voeg onderaan de pagina src/styles.scss volgende code toe: